前 


Ll} 


随 着 手机 和 移动 互联 网 技术 的 日 益 成 熟 ， 移 动 应 用 的 领域 也 从 如 何 开发 ， 发 展 到 如 何 更 高 效 、 更 低 成 本 地 开发 。 传 统 的 原生 平台 (iOS, Android) 开发 技术 虽然 比较 成 熟 ， 但 由 于 开发 效率 和 成 本 的 限 
制 ， 已 经 越 来 越 无 法 满足 移动 互联 网 应 用 的 开发 需求 。 
所 以 ， 具 有 简单 、 迅 速 、 


跨 平台 的 优势 ， 而 且 基于 Web 开 发 语言 和 布局 技术 的 React Native 得 以 迅速 流行 ， 并 一 举 寺 得 跨 平台 开发 技术 的 头筹 。 


口 ， 让 读者 全 面 、 


目前 市 场 上 大 多 数 React Native 书 籍 主要 以 翻译 和 讲解 官方 文档 为 主 ， 并 未 从 开发 实际 应 用 出 发 ， 通 过 典型 案例 来 指导 读者 提高 开发 水 平 。 本 书 以 实战 为 主旨 
绍 React Native 中 常用 的 组 件 、API、 布 局 、 第 三 方 组 件 和 原生 接 
本 书 涉 及 的 概念 较 多 ， 下 面 给 出 一 个 技术 点 云图 ， 希 望 读者 有 所 了 解 


， 通 过 完整 的 电 商 类 App 项 目 实例 ， 来 介 
深入 、 透 彻 地 理解 React Native 主 流 的 开发 和 设计 方法 ， 提 升 实际 开发 水 平和 项 目 实战 能 力 
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本 书 的 进 阶 顺 序 ， 也 给 出 如 下 一 个 图 ， 便 于 读者 了 解 。 
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本 书 特色 


1. 每 一 步 都 有 详细 的 源码 和 实例 参考 


«€ 
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ES 
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之 
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为 了 便于 读者 理解 本 书 内 容 ， 提 高 学 习 效率 ， 本 书 的 所 有 内 容 都 有 详细 的 源码 和 实例 参考 。 对 于 这 些 源码 和 实例 ， 作 者 均 亲 自 编写 和 验证 ， 杜 绝 复制 、 粘 贴 代 码 以 敷衍 读者 的 不 负责 任 行为 。 本 书 源码 


AyLAEhttps://coding.net/u/learnreactnative/p/learnreactnative-sourcecode/git Fak. 


2. 内 容 涵盖 React Native 开 发 的 各 个 方面 


本 书 涵盖 React Native 组 件 、API、 布 局 、 第 三 方 组 件 以 及 原生 接口 等 React Native 应 用 开发 的 各 个 方面 ， 尽 量 保证 不 出 现 知识 “死角 ”。 凡 是 涉及 的 一 些 技术 (如 原委 
也 给 出 了 概念 或 原理 的 解释 。 


3. 结合 工具 助力 更 高 效 的 React Native 开 发 


上 、 瀑 布 流 、 耦 合 性 和 JSON) , 


在 本 书 “ 实 战 ”讲解 的 过 程 中 ， 详 细 介绍 了 React Native 开 发 工具 Nuclide 的 使 用 、React Native 命 令 行 工具 的 用 法 及 各 种 调试 工具 (包括 布局 、 断 点 及 实时 加 载 等) 的 使 用 ， 不 仅 教 读者 如 何 开发 ， 还 


教 读者 如 何 更 高 效 地 开发 。 


4. 项 目 案例 典型 ， 实 战 性 强 ， 有 较 高 的 应 用 价值 


本 书 以 开发 一 个 电 商 类 应 用 为 例 ， 涵 盖 了 React Native 应 用 开发 中 会 用 到 的 所 有 重点 知识 ， 设 计 和 源码 做 到 拿 来 可 用 ， 方 便 应 用 开发 者 随时 查阅 和 参考 。 


5. 收获 的 不 仅仅 是 React Native 平 台 和 编码 


对 于 一 些 学 习 能 力 较 强 的 读者 ， 完 全 可 以 在 React Native 开 发 文档 的 帮助 下 快速 学 习 和 掌握 React Native。 而 本 书 希 望 读者 在 掌握 平台 和 编码 之 外 ， 还 能 够 了 解 实际 应 
程 、 应 用 架构 设计 、 代 码 重 构 技 巧 ， 以 及 原生 平台 与 其 他 跨 平台 开发 的 相关 知识 ， 让 读者 融会 贯通 地 理解 应 用 开发 技术 。 


本 书 内 容 及 知识 体系 


第 1 篇 ”React Native 入 门 和 基础 (第 1~ 2 章 ) 


本 篇 介绍 了 跨 平台 开发 的 主流 方案 和 React Native 基 础 知识 ， 主 要 包括 开发 环境 搭建 、React Native 命 令 行 工具 和 React Native 布 局 调试 。 


第 2 篇 “React Native 应 用 开发 实战 (第 3 ~ 7 章 ) 


本 篇 介绍 了 React Native 实 际 应 用 开发 中 常用 的 技术 ， 主 要 包括 基本 组 件 、 使 用 第 三 方 组 件 、 搭 建 基于 Node.js 的 服务 器 为 应 用 绑 定 真实 数据 、fetch API、AsyncStora 
更 多 React Native 组 件 和 API 的 用 法 、 原 生平 台 接 口 开发 等 。 


第 3 篇 “React Native 混 合 编程 (第 8~10 章 ) 


开发 过 程 中 涉及 的 软件 开发 流 


ge/SQLite/Realm 数 据 库 存储 、 


本 篇 主要 总 结 和 回顾 了 前 7 章 所 开发 的 电 商 类 应 用 的 技术 和 架构 ， 主 要 包括 应 用 的 文件 结构 、Flexbox 的 整体 布局 、 应 用 的 逻辑 结构 、 应 用 的 通信 过 程 及 进一步 改进 的 地 方 和 思路 ， 其 中 就 包括 了 redux 


开发 框架 。 


第 4 篇 ”App 的 发 布 和 更 新 (第 11 ~ 12 章 ) 


本 篇 主要 介绍 了 React Native 应 用 打包 和 发 布 的 全 过 程 ， 配 以 详细 的 截图 说 明 ， 并 且 对 React Native 应 用 发 布 后 的 热 更 新 实现 和 方案 CodePush 做 了 详细 的 示例 说 明 。 


适合 阅读 本 书 的 读者 
.React Native? J AR; 
' iOS 平 台 应 用 开发 工程 师 ; 
Android 平台 应 用 开发 工程 师 ; 


Web 前 端 开发 工程 师 ; 


* Node.js 服 务 端 开发 工程 师 ; 
“ 计算 机 相关 专业 的 学 生 ; 
“ 专业 培训 机 构 的 学 员 ; 


“ 软件 开发 项 目 经 理 。 


本 书 作者 
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第 1 篇 “React Native 入 门 和 基础 


第 1 章 ”为 什么 要 学 习 React Native 


第 2 章 全 局 解析 React Native 开 发 的 基础 技术 


第 1 章 ”为 什么 要 学 习 React Native 


无 论 读者 是 移动 平台 开发 者 ， 还 是 Web 前 端 开发 者 ， 想 必 对 现在 “大 红 大 紫 ” 的 React Native 都 有 所 耳闻 。 那 么 ， 除 了 “ 乘 着 Facebook 这 棵 大 树 好 乘凉 ”的 优势 之 外 ，React Native 到 底 是 何方 “ 神 
圣 ”， 有 什么 令 大 家 “ 趋 之 若 鳌 ”的 优点 呢 ? 下 面 带 着 这 样 的 好 奇 ， 来 随 本 书 一 探究 竟 吧 ! 


本 章 主 要 内 容 有 : 


* React Native 与 React.js 的 对 比 。 

' 为 什么 说 React Native 是 跨 平台 的 。 
* React Native 应 用 的 结构 。 

* React Native 的 特点 。 

* React Native 的 环境 搭建 。 


- 创建 第 一 个 React Native 应 用 。 


1.1 看透 React Native 


React Native (http://facebook.github.io/react-native/) 第 一 次 进入 公众 的 视野 是 在 2015 年 1 月 的 React.js Conf (http://conf.reactjs.org/) 上 ， 随 后 ， 同 年 5 月 份 ，Facebook 在 
F8Conference (https://www.fbf8.com/) 上 正式 宣布 : React Native 项 目 (如 图 1.1 所 示 ) 在 Github 开 源 。 结 果 一 天 之 内 ， 就 收获 了 5000 多 颗 星 ， 受 关注 程度 可 见 一 斑 ! 


Heact Native 


图 1.1 React Native Logo 


a KR: React.js Conf 是 指 Facebook 的 React 开 发 者 大 会 ，F8Conference 是 指 Facebook 的 开发 者 大 会 ，Github 是 全 球 最 大 的 软件 项 目 托 管 平台 ， 也 被 戏称 为 “人 类 的 代码 仓库 ”。 


想必 读者 在 还 没 弄 清 React Native 之 前 ， 又 发 现 了 一 个 “新 朋友 ”React.js (下 文 简称 React) ， 那 到 底 什么 是 React 呢 ? 它 和 React Native 又 是 什么 关系 呢 ? 


先 来 看 看 Facebook 官 方 ( e.face ^ 988925806 eact/) 对 React 的 定义 : 


React is a JavaScript library for building user interfaces 


从 上 述 官 方 的 定义 可 以 知道 : React 是 一 个 用 于 前 端 UI 开 发 的 Javascript 库 。 和 其 他 类 似 的 前 端 框架 相 比 ， 例 如 ， 老 牌 的 Backbone ( kbo ) 、Google 推 出 的 
Angular ( ) 和 以 轻 量 级 著称 的 Vuejs ( j/) ，React 最 大 的 不 同 是 提出 了 Virtual DOM ( 即 虚 拟 DOM) 的 设计 ， 可 以 大 大 提升 页 面 泻 染 的 效率 。 
A IR: 移动 平台 开发 很 好 理解 ， 即 移动 平台 上 (例如 Apple 的 iOS 平 台 ，Google 的 Android 平 台 ) 的 软件 开发 ， 开 发 语言 和 技术 主要 有 Objective C、Swift 及 Java 等 。 而 前 端 开发 是 相对 于 后 端 〈 又 称 服 


FEM) 开发 而 言 的 ， 前 端 主要 负责 开发 通过 浏览 器 和 用 户 交互 的 部 分 ， 开 发 语言 和 技术 主要 有 HTML、CSS 及 JavaScript 等 。 


但 是 ，Facebook 不 仅仅 满足 于 React 对 前 端 开发 技术 的 革新 ， 又 将 React 的 设计 移植 到 原生 开发 中 ， 从 而 诞生 了 React+ Native 结 合 的 产物 ， 即 React Native, 


Ek, React Native 刚 开始 只 支持 iOS App 开 发 ， 但 是 从 2015 年 9 月 起 ，React Native 也 支持 Android App 开 发 ， 而 且 随 着 微软 、 三 星 等 “IT 大 佬 ”的 加 入 ，React Native 还 将 支持 更 多 的 移动 平台 ， 例 
如 ，Sansung 的 Tizen 平 台 ( s://WV g/) 、Microsoft 的 Window Phone (I j »soft.c j es/ReactNat Ea 


所 以 ， 简 单 来 说 : 
* React Native 和 React 使 用 了 相同 的 开发 语言 JavaScript 和 相同 的 设计 理念 React。 


+ React Native 和 React 运 行 的 环境 和 平台 却 是 完全 不 同 的 ，React Native 是 基于 移动 平台 (如 iOS、Android 等 ) ， 而 React 是 基于 浏览 器 。 


C T 国内 网 络 环境 下 访问 React Native 官 网 (I facebook.github.io/react-native/) 可 能 较 慢 ， 读 者 可 以 访问 国内 的 中 文 资源 网 站 ， 例 如 React Native 中 文 网 (htt eactnative.cn/) ， 或 者 自行 搜 
索 加 快 React Native 官 网 访问 速度 的 办 法 。 


简单 了 解 了 React Native 的 由 来 之 后 ， 读 者 或 许 会 有 这 样 的 疑问 ， 开 发 移动 平台 App 使 用 原生 开发 平台 和 语言 就 好 了 ， 为 什么 要 出 现 使 用 React Native 来 开发 移动 平台 App 的 技术 呢 ? 换 句 话说 ，React 
Native 到 底 可 以 解决 什么 问题 呢 ? 


在 进一步 讨论 之 前 ， 笔 者 觉得 有 必要 明确 一 下 什么 是 原生 应 用 和 跨 平台 应 用 。 


1. 原生 应 用 


所 谓 的 原生 应 用 是 指 : 使 用 原生 开发 语言 、 工 具 和 平台 开发 的 


应 用 。 原 生 应 用 开发 的 优势 在 于 拥有 较 高 的 平台 成 熟 度 ， 包 括 平台 的 稳定 性 、 运 行 时 的 性 能 


完善 的 生态 。 


Dan: 所 谓 的 “生态 ”应 该 算是 比较 抽象 的 概念 ， 开 发 平台 的 生态 圈 包 含 了 很 多 方面 ， 从 硬件 上 芯片 和 各 种 电子 元 器 件 的 生产 、 供 应 ， 到 软件 上 所 使 用 的 语言 、 开 发 工具 及 第 三 方 开源 库 的 数量 
质量 ， 以 及 人 的 方面 ， 如 开发 者 的 数量 、 水 平等 因素 。 


但 是 ， 原 生 应 


开发 也 不 是 没有 任何 缺点 ， 那 就 是 开发 成 本 较 高 ， 导 致 开发 效率 相对 较 低 。 例 如 ， 当 一 个 产品 需要 支持 多 种 类 型 的 移动 终端 时 ， 就 需要 熟悉 多 个 原生 平台 开发 的 工程 师 。 
2. 跨 平 台 应 用 


为 了 解决 产品 满足 多 个 平台 的 需求 ， 就 有 了 所 谓 的 跨 平台 应 


开发 。 根 据 实 现 跨 平台 方案 的 不 同 ， 也 就 有 了 以 下 几 种 常见 的 跨 平台 解决 方案 。 


1.2 所 示 。 


混合 应 用 开发 : 在 移动 浏览 器 中 府 入 HTML 页 面 来 开发 移动 应 用 ， 代 表 的 有 Apache Cordova (http:/ /cordova.apache.org/) ， 以 及 基于 Apache Cordova 衍 生 的 Inoic (http://ionicframework.com/) 等 ， 如 


“ 跨 平台 的 语言 : 例如 ， 基 于 .NET 和 C# 的 Xamarin (https:/ /www.xamarin.com/) ， 以 及 基于 Ruby 的 RubyMotion (http://www.tubymotion.com/cn/) ， 如 图 1.3 所 示 。 


i CORDOVA’ 


图 1.2 Apache Cordova LOGO 


rin 


* React Native: 使 用 的 是 Web 开 发 语言 (JavaScript) 和 环境 (Node.js) 。 除 了 本 书 介绍 的 React Native 之 外 ， 类 似 的 技术 方案 还 有 NativeScript (http://www.telerik.com/nativescript) 、Weex (http://weex- 
projectio/) 等 ， 如 图 1.4 所 示 。 


Weer 


1.3 Xamarin LOGO 


A framework for building Mobile cross-platform UI 


图 1.4 Weex LOGO 


Asx: 想 要 了 解 关 于 更 多 React Native 的 架构 和 原理 ， 可 以 参考 1.1.3 节 。 


1.1.3 fit&lReact Native 应 用 的 结构 


在 了 解 完 这 么 多 关于 React Native 的 故 寻 


有 和 优势 之 后 ， 让 我 们 走 近 React Native， 来 进一步 了 解 React Native 的 原理 和 架构 。 


React Native 应 用 的 整体 结构 如 


1.5 所 示 。 


D 


React Native 应 用 


JavaScript 桥 接 层 
JavaScript Code E 


Native Code 
原生 平台 APls 原生 平台 UI 组 件 自 定义 的 原生 组 件 


图 1.5 React Native 应 用 的 整体 结构 


通过 之 前 的 介绍 和 图 1.5 可 以 看 出 : React Native 应 用 开发 使 用 的 是 与 React 相 同 的 开发 语言 JavaSscript 和 设计 思想 React， 而 底层 仍然 是 基于 原生 平台 的 。 这 样 ， 不 同 平台 的 适 配 就 交 由 React Native 平 
台 去 处 理 ， 而 开发 者 只 需要 专注 于 React Native 平 台 应 用 开发 本 身 ， 体 现 出 的 优势 如 下 。 


“ 应 用 层 的 开发 变 得 简单 、 高 效 和 跨 平台 。 
“ 应 用 稳定 性 、 运 行 时 的 性 能 和 原生 平台 接近 。 


+ 在 理解 React Native 原 理 之 后 ， 开 发 者 也 可 以 根据 实际 的 产品 需求 开发 自己 的 React Native 组 件 ， 以 复 用 已 有 原生 平台 的 大 量 优秀 组 件 。 


1.2 React Native 的 特点 


那么 ， 作 为 跨 平台 应 用 开发 的 “新 贵 ”，React Native 相 比 其 他 跨 平 台 技术 到 底 有 哪些 优势 呢 ? 


1.2.1 其 一 : Learn Once，Write Anywhere 


只 需要 学 习 React Native 这 一 种 开发 方式 (包括 平台 、 语 言 和 开发 环境 等 ) 就 可 以 开发 多 个 不 同 平台 的 App。 


这 句 话 简单 来 说 就 是 Learn Once, Write Anywhere， 这 也 是 React Native 的 宣传 广告 ， 如 图 1.6 所 示 。 


React Native 


LEARN ONCE, WRITE ANYWHERE: BUILD MOBILE APPS WITH REACT 


1.6 Learn Once, Write Anythere & 4% j 4 


a 除了 React Native 提 出 的 Learn Once, Write Anywhere 的 口号 ，Java 语 言 也 提出 过 类 似 的 口号 Write Once, Run Anywhere， 两 者 看 起 来 类 似 ， 但 其 实 是 完全 不 同 的 。React Native 就 像 上 面 介 绍 
的 ， 降 低 的 是 学 习 成 本 ， 针 对 不 同 平台 可 能 还 需要 单独 开发 ; 而 Java 语 言 的 意思 是 只 需要 开发 一 次 ， 就 可 以 成 功 运行 在 不 同 的 平台 和 设备 上 。 


目前 ，React Native 对 iOS、Android 平 台 的 支持 已 经 非常 好 了 ， 在 不 远 的 将 来 ， 应 该 还 会 支持 Windows、Tizen 等 更 多 的 移动 平台 。 


mA, React Native 的 大 多 数组 件 也 是 可 以 在 多 个 平台 复 用 的 ， 所 以 学 习 了 React Native 开 发 之 后 ， 完 全 可 以 胜任 多 个 平台 的 开发 任务 且 不 需要 很 高 的 额外 学 习 成 本 ， 大 大 降低 了 开发 成 本 。 


122 Ho: 简单 易学 的 开发 语言 


React Native 开 发 是 基于 JavaScript 语 言 的 ， 虽 然 JavaScript 也 是 一 门 灵 活 、 强 大 且 复 杂 的 语言 ， 但 是 对 于 新 人 来 说 ， 上 手 速 度 相 比 Objective-C 或 Jjava 等 还 是 要 快 得 多 。 而 且 ， 由 于 JavaScript 严 格 模式 
的 使 用 以 及 ECMAScript2015 (下 文 简称 ES6) 标准 的 推出 ，Javascript 被 人 诉 病 的 各 种 语言 问题 也 大 大 减少 。 


不 仅 如 此 ，Facebook 为 了 进一步 提高 代码 可 读 性 和 开发 效率 ， 还 扩展 出 了 JSX 语 法 ， 即 一 种 可 以 在 Javascript 代 码 中 直接 书写 HTML 标 签 的 语法 糖 。 


例如 ， 一 个 典型 的 React Native 项 目的 JavaScript 代 码 看 起 来 是 这 样 的 : 


01 export default class ch02 extends Component ( // 每 个 页 面 可 以 理解 成 一 个 组 件 


02 render() ( // 泻 染 页 面 的 函数 
03 return ( 

04 «View style={styles.container}> // 页 面 根 View 

05 <Text style={styles.welcome}> 

06 Welcome to React Native! 

07 «/Text» 

08 «Text style={styles.instructions}> 

09 To get started, edit index.ios.js 

10 «/Text» 

11 «Text style={styles.instructions}> 

32 Press Cmd+R to reload, {'\n'} 

13 Cmd+D or shake for dev menu 

14 </Text> 

15 </View> 

16 7 

17 } 

16 i 

除了 开发 语言 使 用 JavaScript 之 外 ， 在 React Native 开 发 中 ， 样 式 和 布局 的 技术 相 比 原生 平台 也 是 比较 简单 的 。 


React Native 的 样式 使 


React Native 的 布局 使 
可 以 很 好 解决 OS、Android 等 屏幕 适 配 问题 。 


了 Flexbox 布 局 方式 ，Flexbox 是 Flexible Box| 


例如 ， 一 个 典型 的 React Native 项 目 中 的 样式 和 布局 代码 看 起 来 是 这 样 的 : 


了 类 似 CSS 的 规范 ， 只 是 根据 JavaScript 的 语法 要 求 将 命名 方式 改 成 了 “驼峰 命 


的 缩写 ， 又 称 “ 弹 性 盒子 布局 ”。 


ik" , 例如 ，Web 开 发 中 的 background-color 要 写成 backgroundColor。 


Flexbox 布 局 不 仅 使 


简单 ， 最 大 的 优势 还 在 于 提供 了 自 适 应 显示 设备 和 屏幕 大 小 的 能 力 ， 从 而 


01 const styles = StyleSheet.create ({ 

02 container: { // 页 面 根 View 的 样式 

03 flex: 1, 

04 justifyContent: 'center', 

05 alignItems: 'center', 

06 backgroundColor: '#F5FCFF' 

07 }, 

08 welcome: ( // "欢迎 "文本 的 
09 fontSize: 20, 

10 textAlign: 'center', 

12 margin: 10 

12 Lh 

13 instructions: { // “说 明 "文本 的 和 
14 textAlign: 'center', 

15. color: '#333333', 

16 marginBottom: 5 

17 H 

18 DE 


样式 


样式 


Cuz: 关于 JSX 和 Flexbox 布 局 的 更 多 介绍 ， 


1.2.3 Hi: 接近 原生 应 用 的 性 能 和 体验 


可 以 参考 本 书 第 2 章 的 内 容 。 


对 于 React Native 上 述 的 两 个 优点 ， 混 合 应 
生平 台 的 性 能 优势 无 法 充分 发 挥 出 来 ) 。 


混合 应 


而 React Native 虽 然 使 


开发 的 方式 其 实 也 都 有 ， 但 是 ， 混 合 应 


的 是 类 似 混合 应 


开发 的 语言 ， 但 是 其 


户 很 难 区 分 所 使 


al, 


124 Hu: 完善 的 生态 系统 


的 App 到 底 是 原生 开发 的 还 是 React Native 开 发 的 。 


开发 的 方式 在 实际 开发 中 却 存 在 性 能 和 体验 不 佳 的 先天 不 足 (其 原理 是 在 移动 浏览 器 里 嵌入 HTML 页 面 ， 导 致 原 


开发 方式 从 PhoneGap 发 展 到 Apache Cordova， 而 且 衍 生 的 lonic 也 都 在 不 断 强 调和 优化 性 能 ， 但 是 现 阶段 ， 在 移动 浏览 器 中 嵌入 HTML 页 面 的 运行 效率 ， 仍 然 无 法 和 原生 应 用 相 媲 美 。 
实现 机 制 却 完 全 不 同 : React Native 的 底层 仍然 是 基于 原生 平台 的 ! 所 以 ，React Native 在 性 能 和 体验 上 与 原生 应 用 几乎 没有 太 大 差 


生态 系统 是 衡量 一 个 开发 平台 成 熟 度 的 重要 标志 ， 所 以 开发 者 在 选择 任何 开发 平台 时 ， 很 有 必要 了 解 该 平台 的 生态 状况 。 


React Native 有 着 非常 庞大 的 开发 者 社区 和 很 高 的 活跃 度 ， 这 点 从 React Native 在 Github 上 线 第 一 天 5000 多 颗 星 ， 截 至 2017 年 1 月 4 日 40000 多 颗 星 、9000 多 次 Fork 以 及 9000 多 次 提交 就 可 以 看 出 ， 如 


到 1.7 所 示 。 


facebook / react-native 


Code Issues 760 


Pull requests 148 


Projects 0 


© Watch> 2,801 wk Star 42,363 V Fork 9,688 
Wiki Pulse lil Graphs 


Commits Code frequency Punch card Network Members 


Jan 25, 2015 - Jan 4, 2017 


Contributions to master, excluding merge commits 


Contributions: Commits ~ 


图 1.7 React Native 项 目 在 Github 上 的 关注 度 和 贡献 


Google Trends (https://www.google.com/trends/explore?date=today%2012-m&q=ios%20development,android%20development,react%20native) 也 反映 出 了 React Native 开 发 的 趋势 和 


热度 ， 如 图 1.8 所 示 。 


9 ios development 9 android developm.… react native 


ar err ear erm earch ter 


+ Add comparison 


Worldwide w Past 12 months v All categories Web Search v 


Interest overtime @ 


iu MT 


图 1.8 Google Trends E React Native 的 趋势 和 热度 


同时 ，Facebook 也 在 大 力 支持 和 推广 React Native， 并 推出 了 官方 的 调试 工具 React Developer Tools ( c / store a develop ols/fmka 
) 和 开发 工具 Nuclide (ht 0/) ， 如 图 1.9 所 示 。 


Nuclide 


图 1.9 Facebook 4 +h 4 React Native 开 发 工具 Nuclide 
另外 ， 网 络 上 还 有 大 量 优秀 的 开源 项 目 可 供 学 习 和 参考 ， 例 如 : 
* React Native 开 源 库 检 索 网 站 JS.coach ( js.co ict-native) o 


- React Native 学 习 资 源 汇总 项 目 awesome-teact-native (1 it ) id esome-re ive) 。 


总 之 ， 在 学 习 和 开发 React Native 的 路 上 ， 不 仅 有 本 书 可 以 参考 ， 还 有 非常 多 的 资源 和 帮助 ， 借 用 一 首 歌 名 来 说 : You will never walk alone, 


“ 磨 刀 不 误 砍 柴 工 ”， 在 正式 开发 React Native 应 用 之 前 ， 需 要 先 搭 建 好 React Native 的 开发 环境 。 搭 建 React Native 开 发 环境 有 以 下 几 个 主要 步 又。 


' 原生 开发 工具 : iOS 开 发 使 用 Xcode，Android 开 发 使 用 Android Studio and SDK Tools. 


+ Node.js (ht nodejs.org/) : React Native 是 借助 Node.js， 即 JavaScript 运 行 时 来 创建 JavaScript 代 码 的 。 


* React Native (http npmjs.com/package/react-native/) : 安装 React Native 命 令 行 工具 。 
“ 其 他 辅助 工具 : 代码 编辑 器 Nuclide (https://nuclide.io/) 、 远 程 调试 工具 Chrome 浏 览 器 (http w.google.cn/chrome/browset/) 等 。 


:iOS 开 发 是 依赖 于 macOS 的 ， 所 以 使 用 React Native 开 发 iDS 应 用 需要 使 用 macOS。 


由 于 React Native 应 用 仍然 是 基于 原生 平台 (参考 本 书 1.1. 节 React Native 的 结构 ) ， 所 以 搭建 React Native 的 前 提 是 安装 原生 开发 工具 。 


(1) 安装 Java Development Kit (JDK) ， 从 JDK 官 网 (http://www.oracle.com/tec twork/java/javase/downloads/jdk8-downloads-2133151.html) 下 载 操作 系统 相应 版 本 安装 即 可 。 安 装 
成 功 后 可 以 通过 如 图 1.10 所 示 的 方法 进行 验证 。 


+ ~ java -version 

java version "1.8.0 91" 

Java(TM) SE Runtime Environment (build 1.8.0 91-b14) 

Java HotSpot(TM) 64-Bit Server VM (build 25.91-b14, mixed mode) 


i 


(2) 再 安装 Android 开 发 工具 : Android Studio and SDK Tools, MAndroid Studio 官 网 (https://developer.android.com/studio/index.html) 分 别 下 载 Android Studio 及 命令 行 工具 Android 
SDK Tools。 


图 1.10 ”查看 JDK 安 装 是 否 成 功 及 Java 版 本 号 


Cu 内 网 络 情况 下 访问 Android 相 关 网 站 较 慢 ， 所 以 读者 可 以 搜索 国内 的 Android 资 源 网 站 进行 下 载 。 


(3) 第 一 次 打开 Android Studio 时 ， 需 要 在 “设置 ”中 配置 Android SDK Tools 的 路 径 Android SDK Location， 如 图 1.11 所 示 。 


® Android Studio Setup Wizard o | E | % 


SDK Components Setup 


1.11 Android Studio 中 配置 Android SDK Tools 路 径 


(4) 成 功 配置 Android SDK Tools 的 路 径 之 后 ， 还 要 下 载 和 安装 SDK 相 关 工具 ， 如 图 1.12 所 示 。 


™® Android Studio Setup Wizard 


X Verify Settings 


图 1.12 Android SDK Tools 相 关 工 具 


(5) 此 时 ， 还 需要 将 Android SDK Tools 的 路 径 加 入 到 系统 变量 PATH 中 。 


A : 无 论 是 JD 多 ， 还 是 Android SDK Tools， 以 及 以 后 要 安装 的 其 他 开发 工具 (如 Node.js、npm、React Native) ， 根 据 实 际 情况 ， 都 需要 添加 到 系统 变量 PATH 中 ， 和 否则 会 发 生 找 不 到 该 工具 或 命 
令 的 错误 。 当 然 ， 有 时 候 安 装 程序 会 自动 完成 该 配置 ， 请 读者 知悉 。 


对 于 Linux 或 macOS 系 统 ， 将 下 面 的 配置 添加 到 ~/.bashrc 文 件 中 。 


export ANDROID HOME-/path/to/android/sdk/tools 
export PATH=${PATH}:$ (ANDROID HOME] /tools 
export PATH=$ {PATH} :${ANDROID_HOME}/platform-tools 


对 于 Windows 系 统 ， 将 下 面 的 路 径 添加 到 环境 变量 PATH 中 。 
- Android SDK Tools 文 件 夹 路 径 。 
' Android SDK Tools x 4F- X 9? úh tools 3X 4F KBE. 


- Android SDK Tools 文 件 夹 里 的 platform-tools 文 件 夹 路 径 。 


添加 效果 如 图 1.13 所 示 。 


PATH 


5 \android-sdk-tools\platforms-tools 


系统 变量 E) 


变量 


ComSpec C:\Windows\system32\cmd. exe 
FP NO HOST C... NO 

NUMBER OF PR... 

ns Windows NT 


图 1.13 ”添加 Android SDK Tools 路 径 到 Windows 系 统 变量 PATH 


Baz: 如 果 正 确 配置 之 后 ， 还 是 找 不 到 Android SDK Tools 工 具 或 命令 ， 可 以 尝试 重新 加 载 环 境 变量 或 重启 终端 。 


13.2 ”安装 原生 开发 工具 一 一 iOS 


首先 需要 再 次 提醒 读者 的 是 ， 使 用 React Native 开 发 iOS 应 用 是 需要 macOS 的 ， 所 以 经 济 条 件 允 许 的话 ， 最 好 购置 一 台 Mac 电 脑 。 只 有 在 使 用 React Native 同 时 开发 iOS 和 Android 应 用 ， 才 能 发 挥 出 
React Native 跨 平台 的 优势 。 


Xcode 的 安装 比较 简单 ， 在 macOS 中 登录 Apple ID 后 ， 打 开 App Store 搜 索 Xcode 安 装 即 可 ， 如 图 1.14 所 示 。 


Bors: 请 务必 在 Apple 官 网 或 App Store F Xcode PAZ. 201549 AA 85 s sl] A A XcodeGhost¥ H+, de E] RLY AAA TF AHHA TAE E HARA A SEER Xcode GIU 


Xcode 


Xcode includes everything developers n 


esign, coding, testing, and debugging. The Xcode IDE combined with 


provides developers a unified workflow for user interfac 
the Swift programming language make developing apps easier and more fun than ever before 


,更 多 


版 本 8.2.1 中 的 新 功能 


Xcode 8.2.1 includes Swift 3, and SDKs for iOS 10.2, watchOS 3.1, tvOS 10.1, and macOS Sierra 10.12.2 


,更 多 


Ó "ode Fe Pd View Fed Nape ft Poast Debug SocoeConoo Window "ep 
eee > fpe. smee ee emooemara teem edt Ale 


———XS——————Ó tee merous oes: ——————— € 


Matt Davis Trail 


Mi Fame State Perk CA 


图 1.14 在 App Store 中 查找 并 安装 Xcode 


1.3.3. 安装 Nodejjs 


sed to create great applications for Mac, iPhone, iPad, Apple TV, and Apple Watch. Xcode 


Apple 网 站 
Xcode 支持 
App 使 用 许可 协议 


客户 隐私 政策 


类 别 : 软件 开发 工具 


更 新 日 期 : 2016 年 12 月 19 日 


限 4 岁 以 上 


兼容 性 


OS X 10.11.5 或 更 高 版 本 


打开 Nodejs 官 网 的 下 载 页 面 (https://nodejs.org/en/download/) ， 下 载 当 前 系统 对 应 的 安装 包 ， 这 里 以 macOS 系 统 为 例 ， 下 载 的 安装 包 为 node-v6.9.2.pkg。 


Qus. 推荐 读者 使 用 最 新 的 LTS 版 本 ， 因 为 官方 维护 的 周期 较 长 ， 功 能 和 稳定 性 较 好 。 


(1) 下 载 完成 后 双击 安装 包 进行 安装 ， 如 图 1.15 所 示 。 


(2) 根据 安装 向 导 提示 ， 单 击 相应 的 “继续 ”或 “同意 ”按钮 ， 最 后 单 击 “安装 ”按钮 进行 安装 。 安 装 成 功 后 ， 如 图 1.16 所 示 。 


Me 


欢迎 使 用 "Node.js" 安 装 器 
This package will install Node.js v6.9.2 and npm v3.10.9 
e 介绍 into /usr/local/. 
许可 
目的 宗 卷 
安装 类 型 
摘要 
继续 
图 1.15 ”安装 Node.js 
ez 
安装 成 功 。 
Node.js was installed at 
e 介绍 
o 许可 /usr/local/bin/node 
e 目的 宗 卷 npm was installed at 
© 安装 类 型 /usr/local/bin/npm 
9 安装 DS 
Make sure that /usr/local/bin is in your SPATH. 
EE 摘要 


关闭 


在 图 1.16 中 ， 需 要 注意 以 下 有 用 的 信息 。 


* Node.js 的 安装 路 径 : /usr/local/bin/node s 


“npm 的 安装 路 径 : /usr/local/bin/npme 


+ 保证 /usr/local/bin 添 加 到 了 系统 变量 PATH 中。 


Liu 


Node.js 在 Windows 系 统 上 的 安装 过 程 和 macOS 相 同 ， 并 且 Node.js 的 Windows 安 装 包 默 认 还 会 自动 将 安装 好 的 工具 和 命令 的 路 径 添 加 到 环境 变量 PATH 中 。 


(3) 通过 如 图 1.17 所 示 方 法 验证 安装 是 否 成 功 。 


+ ~ ls -l /usr/local/bin/node 


-PlWXPWXr-X 


+ ~ ls -l /usr/local/bin/npm 
lrwxr-xr-x 1 502 staff 38 12 28 14:25 


在 Node.js 及 npm 安 装 好 之 后 ， 终 于 可 以 进入 3 


实际 开发 中 通常 使 用 nvm (1 


了 。 使 用 如 下 命令 即 可 : 


npm install -g react-native-cli 


B 


图 1.17 


图 1.16 ”Node.js 安 装 成 功 


1 root wheel 30636560 12 7 03:00 


-> ../lib/node modules/npm/bin/npm-cli .js 


查看 Node.js、npm 安 装 路 径 及 版 本 号 


) 安装 和 管理 Node.js， 并 且 使 用 cnpm ( 


ERR: 安装 React Native 了 。 安 装 React Native 就 是 安装 React Native 的 


如 果 使 用 npm 下 载 速度 较 慢 的 话 ， 可 以 使 用 cnpm 代 替 npm， 即 cnpm install-g react-native-cli o 


安装 完成 


+ 


后 ， 可 以 通过 如 图 1.18 所 示 方 法 验证 是 否 成 功 。 


^ react-native -h 


Usage: react-native [command] [options] 


Commands : 


人 人 


) 来 代替 npm， 这 是 因为 cnpm 使 用 的 是 淘宝 源 ， 下 载 的 速度 较 


命令 行 


于 前 面 已 经 安装 好 Node.js 及 npm， 安 装 React Native 就 非常 简 生 


init <ProjectName> [options] generates a new project and installs its dependencies 


Options: 


E 


-h, --help 
-V, --version 


^ react-native 


react-native-cli: 


output usage information 
output the version number 


图 1.18 ”查看 react-native 命 令 行 工具 帮助 和 版 本 号 


安装 完 以 上 所 有 工具 后 ， 理 论 上 已 经 可 以 


始 React Native: 


Nuclide 


( ) 是 Facebook 官 方 推出 的 一 款 React Native 开 发 工 


本 书 在 后 面 的 讨论 中 ， 并 不 严格 区 分 Nuclide 和 Atom。 


发 之 旅 了 ， 但 在 实际 


发 中 ， 还 有 一 些 必 备 的 高 效 生产 工 


， 在 这 是 


。 从 严格 意义 上 说 ，Nuclide 并 不 是 一 款 独立 


推荐 读者 也 安装 一 下 。 


的 编辑 器 ， 它 只 是 


于 Atom ( 


) 的 一 个 扩 


展 ， 所 以 


当然 ， 读 者 在 了 解 React Native 和 Nuclide 之 前 ， 肯 定 已 经 有 自己 熟悉 的 JavaScript 的 开发 工具 ,如 Sublime Text (http://www.sublimetext.com/) 、 
Webstorm (https://www.jetbrains.com/webstorm/) 等 ， 但 是 笔者 还 是 强烈 推荐 Nuclide， 原 因 如 下 。 


“ 官方 出 品 ， 对 React Native 新 特性 及 开发 、 调 试 支持 更 好 。 

“ 基于 Atom， 拥 有 了 庞大 的 第 三 方 插件 库 。 
Nuclide 的 安装 过 程 如 下 : 

: 从 Atom 官 网 (https://atom.io/) 下 载 最 新 版 本 的 Atom。 


- 打开 Atom， 选 择 Settings|Install Packages 命 令 ， 搜 索 并 安装 Nuclide， 如 图 1.19 所 示 。 


x Settings 


install Packages 


nuclide 


‘ 


图 1.19 ”安装 Nuclide 


Chrome 浏 览 器 是 React Native 开 发 的 远程 调试 工具 ， 安 装 比较 简单 ， 这 里 就 不 介绍 了 。 在 Chrome 浏 览 器 安装 完成 后 ， 还 需要 在 Chrome 的 应 用 商店 中 安装 这 款 Chrome 插 件 : React Developer 
Tools， 如 图 1.20 所 示 。 


a 


: 和 Android 的 问题 一 样 ， 国 内 网 络 情况 下 访问 Chrome 相 关 网 站 也 较 慢 ， 所 以 读者 可 以 搜索 国内 的 其 他 资源 网 站 进行 下 载 和 安装 。 


“© - React Developer Tools 


h Facebook 提供 
weeks (539) FRHTR 448,880 ČAP 
概述 评价 相关 
oe 
O O O / |» React e TodoMVC x WS y? 
€ SC [5 todomvc.com/labs/architecture-examples/react/ z 


What needs 


X Elements Resources Network Sources Timeline Profiles Audits Console | React | 


to be done? 


v «Top Level» > Props 
v <TodoApp> v State 
v «div» 
v «header id="header"> phackad: Telas 
<h1>todos</hi> " vaname = 
w«ReactDOMInput [ref-"mewField"]id | —Proto__: Object 
«input ref="new = “tc | Instance 
</ReactDOMInput> v Event Listeners Y- 
«/header» TAD 
fidus onKeyDown 
«/TodoApp» | > ReactDOMInput#new- (anonymous function) 
todo 
Todoae input | 
| D, ase: 43 党 | 
此 扩展 程序 的 用 户 还 安装 了 
^ ^. ^. 
p — 一 个 一 一 人 一 
< Viewport Resizer 字体 变 大 + | ”扩展 管理 a 
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1.20 ”安装 Chrome 插 件 React Developer Tools 


3. Watchman 工 具 


Q4 与 您 的 设备 兼容 


Adds React debugging tools to the 
Chrome Developer Tools. 


React Developer Tools is a Chrome 
DevTools extension for the open-source 
React JavaScript library. It allows you to 
inspect the React component hierarchies 
in the Chrome Developer Tools. 


You will get a new tab called React in 
your Chrome DevTools. This shows you 
the root React components that were 
rendered on the page, as well as the 
subcomponents that they ended up 


会 网 站 
O 举报 小 用 情况 


其 他 信息 

版 本 : 0.15.4 

最 后 更 新 日 期 : 2016 年 9 月 3 日 
大 小 : 179KiB 

WE: Fnelish 


Code Cola 
www KE 073) 


x 


Watchman (https://facebook.github.io/watchman/docs/install.html) 是 由 Facebook 提 供 的 监视 文件 系统 变更 的 工具 ， 它 可 以 提高 开发 时 的 性 能 (捕捉 文件 的 变化 从 而 实现 实时 刷新 ) 。 


macOs 系 统 的 安装 比较 简单 ， 使 有 


HomeBrew (http://brew.sh/) 工具 即 可 快速 完成 安装 ， 安 装 命令 如 下 : 


brew update 
brew install watchman 


Cain: HomeBrew 是 macOS 平 台 上 的 软件 包 管理 工具 ， 拥 有 安装 、 印 载 、 更 新 、 查 看 和 搜索 软件 包 等 很 多 实用 的 功能 。 


Linux 系 统 需 要 下 载 源码 自己 编译 安装 ， 方 法 也 很 简单 ， 安 装 命令 如 下 : 


git clone https://github.com/facebook/watchman.git 
cd watchman 

git checkout v4.7.0 # the latest stable release 
./autogen.sh 

./configure 

make 

sudo make install 


Windows 系 统 上 的 Watchman 现 在 还 处 于 Alpha 内 部 测试 阶段 ， 对 系统 也 有 限制 ， 例 如 ， 仪 支持 Windows x64on Windows Server2012R2 以 及 之 后 的 最 新 Windows 版 本 。 如 果 读 者 想 抢先 体验 的 话 ， 


可 以 在 Watchman 项 目的 问题 19 (https://github.com/facebook/watchman/issues/19) 中 找到 详细 的 介绍 。 


14 第 一 个 React Native 应 用 
颇 费 一 番 周 折 拱 建 好 环境 之 后 ， 终 于 可 以 长 舒 一 口气 ， 来 开发 第 一 个 React Native 应 用 了 。 
1.4.1 初始 化 项 目 


首先 ， 使 用 React Native 命 令 行 工具 来 初始 化 一 个 新 的 项 目 : 


react-native init ch02 


等 待 工程 创建 成 功 并 安装 好 所 有 依赖 后 ， 使 用 Atom 打 开 ch02 项 目 ， 来 仔细 瞧 一 瞧 React Native 项 目 结构 ， 如 图 1.21 所 示 。 


File Tree 
EN FILES 


[) package.json 


package.json 


package.json 
1 
"ch02", 
"0.0.1", 


{ 


"node node modules/react-native/local-cli/cli.js start" 


"jest" 
( 


"15.4.1", 
"0.39.2" 


"react-nativ 


图 1.21 React Native 项 目 结构 


其 中 目录 和 文件 的 详细 说 明 如 表 1.1 所 示 。 


表 1.1 React Native 目 录 和 文件 的 说 明 


目录 /文件 


说 PA 


tests 
android 
ios 
node modules 


React Native 工 程 单元 测试 文件 夹 
原生 Android 工 程 文件 夹 

原生 iOS 工 程 文件 夹 

React Native 工 程 依赖 的 第 三 方 库 


index.android.js React Native L. f+ Android Appt : 文件 


index.ios.js React Native I. F£iOS App 入 口 文件 


package.json 


React Native 工 程 配 置 文件 ， 描 述 了 工程 的 所 有 信息 以 及 第 三 方 库 的 依赖 关系 ， 例 
如 ， 刚 才 初 始 化 的 ch02 工 程 依赖 的 React Native 版 本 为 0.39.2 


Eje: 为 什么 从 网 络 下 载 的 React Native 项 目 无 法 直接 运行 ? 


这 是 因为 .gitignore 文 件 中 忽略 了 node_modules 文 件 夹 下 面 的 文件 ， 所 以 第 三 方 库 没 有 被 添加 到 版 本 控制 工具 中 ， 要 运行 从 网 络 下 载 的 React Native 项 目 ， 首 先 需要 在 根 目 录 下 执行 npm install Acnpm 
install， 安 装 所 依赖 的 第 三 方 库 到 node_modules 文 件 夹 中 。 


成 功 运行 React Native 项 目的 前 提 是 对 应 的 原生 开发 工具 安装 和 配置 正确 ! 例如 : 


- 运行 IOS App， 需 要 正确 安装 和 配置 Xcode 工具 。 


: 运行 Android App， 需 要 正确 安装 和 配置 Android Studio and SDK Tools. 


i 


首先 ， 通 过 如 下 命令 查看 可 


xcrun simctl list devices 


的 iOS 设 备 


接着 ， 通 过 指定 设备 名 称 就 可 以 运行 OS App 了 。 


react-native run-ios --simulator "iPhone 7" 


然后 耐心 地 等 待 编译 和 安装 成 功 后 ， 第 一 个 React Native 应 用 就 运行 起 来 啦 ! 如 图 1.22 所 示 。 
2. 运行 Android App 


同样 ， 先 通过 如 下 命令 查看 可 用 的 Android 设 备 。 


adb devices 


接着 ， 通 过 指定 设备 名 称 运 行 Android App. 


react-native run-android emulator-5554 


运行 效果 如 图 1.23 所 示 。 
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Welcome to React Native! 


To get started, edit index.ios.js 
Press Cmd+R to reload, 
Cmd+D or shake for dev menu 


图 1.22 ”运行 在 iOS 模 拟 器 中 的 React Native 应 用 


d'l w 11:36 


Welcome to React Native! 


To get started, edit index.android.js 


Double tap R on your keyboard to reload, 
Shake or press menu button for dev menu 


1.23 运行 在 Android 模 拟 器 中 的 React Native 应 用 


运行 完 第 一 个 React Native 应 用 ， 想 必 读 者 已 经 感受 到 了 React Native 强 大 之 处 : 不 需要 了 解 \OS 和 Android 原 生 开发 平台 ， 使 用 JavaScript 就 可 以 开发 出 可 以 运行 在 多 个 平台 的 移动 应 用 ! 


14.3 ”调试 项 目 


在 此 ， 笔 者 还 想 补充 说 明 一 下 关于 React Native 调 试 选项 的 相关 内 容 。 因 为 React Native 不 仅 运行 跨 平台 应 用 很 方便 ， 而 且 还 提供 了 很 多 好 用 的 调试 工具 加 速 开 发 。 


真 机 调试 时 晃动 设备 就 可 以 打开 调试 选项 ， 模 拟 器 调试 时 还 可 以 使 用 如 下 快捷 键 。 
' iOS 模 拟 器 快捷 键 : command+D。 


Android 模拟 器 快捷 键 : command+M。 


调试 效果 如 图 1.24 所 示 。 


React Native: Development (RCTBatchedBridge) 


Reload 


Debug JS Remotely 


Enable Live Reload 


Start Systrace 


Enable Hot Reloading 


Show Inspector 


Show Perf Monitor 


Cancel 


图 1.24 在 模拟 器 中 打开 调试 选项 
这 里 打开 Enable Live Reload 选 项 ， 这 样 在 React Native 项 目 中 做 任何 修改 后 ， 不 需要 重新 启动 或 加 载 App， 运 行 中 的 App 都 可 以 自动 更 新 了 。 


Cus. Fe f Enable Live Reload 选 项 ，React Native 还 提供 了 其 他 很 便利 的 调试 选项 ， 例 如 ， 远 程 调试 选项 DebugJS Remotely， 可 以 使 用 Chrome 浏 览 器 进行 断 点 调试 。 关 于 更 多 调试 选项 的 使 用 ， 读 者 可 
以 在 实际 开发 中 探索 和 熟悉 。 


1.5 ”小 试 牛刀 一 一 更 改 React Native 项 目 源 


应 用 虽然 已 经 运行 起 来 了 ， 但 是 到 现在 还 没有 看 到 或 修改 任何 代码 ， 读 者 是 不 是 觉得 意犹未尽 呢 ? 下 面 就 来 看 看 React Native 项 目的 源码 吧 。 


打开 index.iosjs 文 件 ， 可 以 看 到 与 显示 在 设备 上 内 容 直接 相关 的 代码 : 


01 export default class ch02 extends Component ( // 每 个 页 面 可 以 理解 成 一 个 组 件 
02 render() { // 泻 染 页 面 的 函数 
03 return ( 

04 «View style={styles.container}>  // 页 面 根 View 

05 <Text style={styles.welcome}> 

06 Welcome to React Native! 

07 «/Text» 

08 «Text style={styles.instructions}> 

09 To get started, edit index.ios.js 

10 «/Text» 

11 «Text style={styles.instructions}> 

12 Press Cmd*R to reload, {'\n'} 

13 Cmd+D or shake for dev menu 

14 «/Text» 

15 «/Niew» 

16 ) 7 

17 } 

16 } 


为 了 证 实 我 们 的 想法 ， 将 代码 中 的 文本 内 容 从 “Welcome to React Native! ”修改 为 “我 的 第 一 个 React Native 应 用 ! " ， 然 后 在 iOS 模 拟 器 中 使 用 快捷 键 command+ R 重 新 加 载 应 用 ， 果 然 界面 更 
新 了 ! 如 图 1.25 所 示 。 
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我 的 第 一 个 React Native 应 用 ! 
To get started, edit index.ios.js 
Press Cmd+R to reload, 
Cmd+D or shake for dev menu 


图 1.25 ”修改 文本 内 容 后 的 效果 


Cus. 如 果 已 经 打开 了 Enable Live Reload 调 试 选 项 ， 就 不 需要 手动 重新 加 载 应 用 了 ， 修 改 完 代码 直接 可 以 看 到 效果 。 


接着 ， 再 来 看 看 显示 样式 的 代码 : 


01 const styles = StyleSheet.create(( 

02 container: ( // 页 面 根 View 的 样式 
03 flex: 1, 

04 justifyContent: 'center', 

05 alignItems: 'center', 

06 backgroundColor: '#F5FCFF' 

07 i 

08 welcome: { //“ 欢 迎 “ 文 本 的 样式 
09 fontSize: 20, 

10 textAlign: 'center', 

12 margin: 10 

12 l 

13 instructions: { // "说 明 "文本 的 样式 
14 textAlign: 'center', 

15 color: '#333333', 

16 marginBottom: 5 

17 ] 

18 pi 


在 welcome 样 式 中 添加 color: ‘red’ 属性 : 


01 welcome: { 

02 fontSize: 20, 

03 textAlign: 'center', 

04 margin: 10, 

05 color: 'red' // 也 可 以 用 RGB 值 '#FF0000' 来 表示 红色 
06 fy 


Cus: 第 一 次 编写 React Native 代 码 时 很 容易 发 生 遗 漏 喜 号 “，” 等 拼写 错误 。 


lim 


重新 加 载 应 用 后 ， 效 果 如 图 1.26 所 示 。 


以 上 是 iOS App 的 运行 效果 ， 同 样 也 可 以 对 index.android.js 文 件 做 类 似 的 修改 ， 


limi 


新 加 载 Android App 效 果 如 图 1.27 所 示 。 
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我 的 第 一 个 React Native 应 用 ! 
To get started, edit index.ios.js 


Press Cmd+R to reload, 
Cmd+D or shake for dev menu 


图 1.26 修改 文字 颜色 后 效果 


di ta 9:40 


我 的 第 一 个 React Native 应 用 | 


To get started, edit index.android.js 


Double tap R on your keyboard to reload, 
Shake or press menu button for dev menu 


图 1.27 Android App 运行 的 效果 


际 开发 中 ，index.io.js 和 index.android.js 往 往复 用 相同 的 逻辑 ， 即 将 相同 的 代码 提取 到 公共 文件 中 ， 这 样 就 可 以 大 大 发 挥 React Native 的 跨 平台 优势 


Cu : 


16 Wes 


区 的 积极 参与 和 贡献 ，React Native 才 有 了 今天 这 


加 上 React 以 及 React Native 自 身 优秀 的 设计 及 开源 社 


成 本 以 及 复 用 等 产品 开发 中 的 诸多 因素 ， 


React Native 兼 顾 了 开发 的 难 易 度 、 稳 定性 、 性 能 、 


样 的 地 位 。 
的 介绍 ， 想 必 读 者 已 经 对 React Native 开 发 有 了 一 个 初步 的 认识 ， 体 会 到 了 React Native 开 发 简单 、 跨 平台 的 优势 。 接 下 来 将 通过 开发 一 个 完整 的 App 实 例 ， 进 一 步 学 习 和 掌握 React 


通过 本 章 


Native。 


第 2 章 ”全 局 解析 React Native 开 发 的 基础 技术 


发 雹 开 了 一 大 步 ， 意 味 着 读者 能 够 独立 完成 一 个 React Native 应 


。 虽 然 其 功能 比较 简单 ， 但 却 向 着 学 习 React Native 


在 第 1 章 搭建 好 React Native 开 发 环境 之 后 ， 我 们 开发 了 第 一 个 React Native 应 


的 开发 。 
从 本 章 开始 ， 我 们 将 从 零 开始 开发 一 个 功能 更 加 完备 、 强 大 的 React Native 应 


。 还 在 等 什么 ? 赶紧 进入 状态 吧 ! 


本 章 主要 内 容 有 : 


+ 掌握 版 本 控制 工具 Git 的 使 用 。 
| 了解 ]SX 解 决 方案 。 

+ 熟悉 React Native 的 布局 。 

+ 了 解 如 何 调试 React Native 项 目 。 


+ 从 零 开 始 设计 第 一 个 完成 的 电 商 App。 


2.1 开发 具备 的 基础 知识 说 明 


就 是 网 购 ， 因 此 ， 本 书 就 以 典型 的 电 商 类 移动 应 


的 全 过 程 。 


为 例 ， 向 读者 展示 使 用 React Native 设 计 、 开 发 应 


日 常生 活 中 ， 人 们 越 来 越 离 不 开 的 


先 了 解 一 些 React Native 开 发 的 基础 知识 。 


不 过 ， 在 正式 开发 电 商 类 移动 应 用 之 前 ， 有 必 


Eg 


React Native 开 发 中 需要 具备 的 基础 知识 如 下 。 


Git: 最 流行 的 版 本 控制 工具 ， 是 开发 中 代码 管理 的 基础 。 


+ JSX: React Native 开 发 所 使 用 的 语言 ， 一 种 基于 JavaScript 的 扩展 语法 。 


+ Flexbox 布 局 : React Native 开 发 的 布局 技术 ， 是 UI (User Interface) 开发 的 核心 。 


“ 调试 : 提高 React Native 开 发 效率 的 重要 手段 。 
实现 信息 的 内 部 形式 与 人 类 可 以 接受 形式 之 间 的 转换 。 


Anm: UI (User Interface) 指 用 户 界面 ( 亦 称 使 用 者 界面 ) ， 是 系统 和 用 户 之 间 进 行 交互 和 人 


2.2 ”Git 版 本 控制 工具 


应 该 是 “ 标 配 ”的 开发 工具 之 一 了 。 


对 于 现在 的 软件 项 目 来 说 ， 版 本 控制 工 


问题 : 什么 是 版 本 控制 工具 ? 


回答 : 版 本 控制 工具 提供 完备 的 版 本 管理 功能 ， 用 于 存储 、 追 踪 目 录 (R) 和 文件 的 修改 历史 


2.2.1 安装 Git 


这 里 笔者 推荐 一 款 免费 、 开 源 、 简 单 易 用 的 版 本 控制 工具 Git (https://git-scm.com/) 。 


LV Git 的 诞生 与 Linux 有 不 解 之 缘 ，Git 是 由 被 誉 为 “Linux 之 父 ” 的 Linus 
Torvalds (https://zh.wikipedia.org/wiki/%E6%9E%97%ET%BA%B3%E6%96%AFYC2%BT%E6%89%98%ET%I3%AG%ES%35%B9) 最 初 开发 的 ， 他 认为 之 前 现 有 的 版 本 控制 工具 ， 例 如 


CVS (http:/ /www.nongnu.org/cvs/) 、SVN (https://subversion.apache.org/) 都 满足 不 了 Linux Kernel 开 发 的 需求 免费、 简单、 高 效 以 及 分 布 式 ) ， 所 以 就 决定 自己 开发 一 款 全 新 的 版 本 控制 工具 Git。 


Git 的 安装 比较 简单 ， 请 读者 自行 到 官网 下 载 页 面 (https://git-scm.com/downloads) 下 载 操作 系统 的 相应 版 本 安装 即 可 。 安 装 成 功 后 可 以 通过 如 图 2.1 所 示 方 法 进行 验证 。 


+ ~ git version 

git version 2.9.3 (Apple Git-75) 

+ ~ git --help 

usage: git [--version] [--help] [-C «path»] [-c name-value] 


[--exec-path[=<path>]] [--html-path] [--man-path] [--info-path] 
[-p | --paginate | --no-pager] [--no-replace-objects] [--bare] 
[--git-dir=<path>] [--work-tree=<path>] [--namespace=<name> ] 
<command> [<args>] 


图 2.1 查看 Git 版 本 号 和 帮助 来 验证 Git 安 装 是 否 成 功 


2.2.2 ”Git 常 用 命令 


本 节 来 了 解 Git 常 用 命令 的 用 法 。 


(1) 新 建 一 个 文件 夹 ， 然 后 在 新 建 的 文件 夹 中 创建 Git 仓 库 。 使 用 的 命令 如 下 : 


mkdir git-demo // 新 建 git-demo 文 件 夹 
cd git-demo // 进入 git-demo 文 件 夹 
git init // 创建 了 一 个 新 的 Git 仓 库 


效果 如 图 2.2 所 示 。 


^ mkdir git-demo 
^ cd git-demo 
+ git-demo git init 


Initialized empty Git repository in /Users/yuanlin/git-demo/ .git/ 
+ git-demo master) || 


图 2.2 ”新建 本 地 Git 仓 库 


(2) 在 刚才 新 建 的 Git 仓 库 中 ， 就 可 以 进行 添加 和 提交 修改 的 操作 了 。 


touch test.file // 为 了 演示 Git 的 使 用 ， 这 里 先 新 建 test .file 文 件 


Cus. touch 命 令 是 Linux 和 macOS 系 统 下 的 命令 行 工具 ，touch test.file 的 作用 是 在 当前 目录 下 新 建 空 文件 test.file， 读 者 也 可 以 使 用 其 他 自己 熟悉 的 方法 新 建 测试 文件 。 


(3) Git 添 加 修改 的 命令 使 用 方法 如 下 : 


git add test.file // 添加 test .file 文 件 
git add * // 添加 所 有 文件 


(4) Git 提 交 修改 的 命令 使 用 方法 如 下 : 


git commit -m "新 建 test.file" // 提交 修改 并 且 描 述 此 次 修改 的 内 容 


Pues. 第 一 次 使 有 


eit commit 命 令 时 ， 会 提示 用 户 配 置 Git 账 户 和 邮箱 ， 配 置 方法 为 git config-global user.name"Your Name", git config--global user.email"Y our Email". 


此 时 ，Git 的 工作 流 如 图 2.3 所 示 。 


工作 目录 add commit HEAD 


working dir 即 : 最 后 一 次 提交 


2.3 ”Git 添 加 和 提交 修改 的 工作 流 


(5) 添加 和 提交 操作 成 功 之 后 ， 可 以 通过 如 下 方法 查看 结果 。 


git log // 查看 Git 提 交 的 历史 记录 


此 时 ， 对 于 上 面 的 提交 ， 读 者 可 以 看 到 类 似 下 面 的 信息 。 


commit COMMIT-ID 
Author: GIT-USER-NAME «GIT-USER-EMAIL» 
Date: COMMIT-DATE 

新 建 test .file 


(6) 除了 自己 创建 Git 仓 库 ， 还 可 以 从 网 上 下 载 已 有 的 Git 仓 库 代 码 。 这 里 ， 以 Github 上 React Native 项 目 (https://github.com/facebook/react-native) 为 例 ， 使 用 的 命令 如 下 : 


git clone https://github.com/facebook/react-native // 将 远程 仓库 复制 到 本 地 


(7) 此 时 ， 由 于 Git 仓 库 是 在 远程 服务 器 上 ， 还 需要 用 到 git pull 和 git push 这 两 个 命令 来 操作 Git 仓 库 。 


cd react-native // 首先 需要 进入 Git 仓 库 所 在 的 文件 夹 


把 刚才 复制 到 本 地 的 Git 仓 库 更 新 到 远程 仓库 的 最 新 改动 ， 使 用 git pull 命 令 。 


git pull 


把 刚才 复制 到 本 地 的 Git 仓 库 提交 的 修改 提交 到 远程 仓库 中 ， 使 用 git push 命 令 。 


git push 


av 使 用 Github 上 React Native 项 目的 例子 ， 执 行 git push 可 能 会 提交 失败 ， 这 是 因为 提交 至 远程 仓库 需要 权限 ， 请 读者 知悉 。 


当然 ， 除 了 上 述 介绍 的 基本 用 法 之 外 ，Git 命 令 还 有 很 多 ， 举 例如 下 。 


+ git status: 查看 Git 仓 库 状 态 。 

. git diff; 查看 Git 仓 库 修改 内 容 的 差异 。 
+ git branch: 使 用 和 管理 Git 分 支 。 

-git tag: 使 用 和 管理 Git 标 签 。 


本 书 限于 篇 幅 就 不 


介绍 了 ， 想 要 深入 了 解 的 读者 可 以 参考 Git 相 关 书 籍 和 教程 。 


Las 如 果 读者 对 Git 命 令 不 熟悉 的 话 ， 推 荐 使 用 Git 的 图 形 化 工具 ， 例 如 ，SoutceTree (https://www.sourcetreeapp.com/) 或 者 Tower (https:/ /www.git-tower.com/mac/) ， 它 们 都 提供 了 Windows 和 
macOS 的 版 本 。 


2.3 React Native 的 JSX 解 决 方案 


JSX 并 不 是 一 门 新 的 开发 语言 ， 而 是 Facebook 提 出 的 语法 方案 : 一 种 可 以 在 JavaScript 代 码 中 直接 书写 HTML 标 签 的 语法 糖 ， 所 以 ，JSX 本 质 上 还 是 JavaScript 语 言 。 


Aan: 语法 糖 (Syntactic sugar) 是 由 英国 计算 科学 家 彼得 > ZT (https://zh.wikipedia.org/wiki/%E5%BD%BC%E5%BE%97%C2%B7%E5%85%B0%E4%B8%81) 发 明 的 一 个 术语 ， 指 计算 机 语言 
中 添加 的 某 种 语法 ， 这 种 语法 对 语言 的 功能 并 没有 影响 ， 但 是 更 方便 程序 员 使 用 。 语 法 糖 让 程序 更 加 简洁 ， 有 更 高 的 可 读 性 。 


在 React 和 React Native 开 发 中 ， 不 一 定 非 要 使 用 JSX， 也 可 以 直接 使 用 Javascript 进 行 开发 。 但 是 ， 强 烈 建议 读者 使 用 JSX! 因为 JSX 在 定义 类 似 HTML 这 种 树 形 结构 时 ， 简 单 明 了 ， 极 大 地 提高 了 开发 
和 维护 的 效率 。 


下 面 以 1.4 节 第 一 个 React Native 应 用 中 的 代码 为 例 : 


01 export default class ch02 extends Component ( // 每 个 页 面 可 以 理解 成 一 个 组 件 
02 render() { // 泻 染 页 面 的 函数 
03 return ( 

04 «View style={styles.container}>  // 页 面 根 View 

05 «Text style={styles.welcome}> 

06 Welcome to React Native! 

07 «/Text» 

08 «Text style={styles.instructions}> 

09 To get started, edit index.ios.js 
10 «/Text» 

11 «Text style={styles.instructions}> 

12 Press Cmd+R to reload, {'\n'} 

13 Cmd+D or shake for dev menu 


14 </Text> 


15 «/Niew» 
; 


在 上 述 代 码 中 ， 组 件 的 render () 方法 函数 是 用 于 演 染 页 面 的 ， 它 的 返回 值 是 一 个 View 的 对 象 ， 但 是 为 什么 没有 发 现 创建 对 象 和 设置 属性 的 代码 呢 ? 原来 ，JSXTransformer 帮 有 我们 把 代码 中 XML-Like 
语法 编译 转换 成 真实 可 用 的 JavasScript 代 码 ， 它 不 仅仅 创建 View 对 象 、 设 置 View 样 式 和 布局 ， 同 时 更 加 贴心 的 是 ， 还 构建 了 View 之 间 的 树 形 结构 。 例 如 ， 上 述 例子 中 的 树 形 结构 是 这 样 的 : 


Root View (style container) 

---- Sub Text 1 (style welcome) 
---- Sub Text 2 (style instructions) 
---- Sub Text 3 (style instructions) 


24 React Native 的 Flexbox 布 局 


无 论 是 在 移动 平台 还 是 Web 前 端 开发 中 ， 布 局 技术 都 是 必 不 可 少 的 。 了 解 Web 开 发 的 读者 想必 都 听 说 过 著名 的 CSS “盒子 模型 ”， 如 图 2.4 所 示 。 


height 


width 


图 2.4 CSS“ 人 金子 模型 


CSS “盒子 模型 ”依赖 于 position 属 性 、 浮 动 属性 以 及 display 属 性 来 进行 布局 ， 所 以 ， 对 于 一 些 特殊 但 常用 的 布局 (例如 垂直 居中 ) 实现 就 比较 困难 。 


于 是 ， 在 2009 年 ，W3C 提 出 了 一 种 新 的 方案 一 一 Flexbox 布 局 。Flexbox (Flexible Box 的 缩写 ， 又 称 弹 性 盒子 布局 ) 布局 则 在 提供 一 个 更 加 有 效 的 方式 制定 、 调 整 和 分 布 一 个 容器 里 的 项 目 布局 ， 即 使 
他 们 的 大 小 是 未 知 或 者 动态 的 。Flexbox 布 局 的 主要 思想 是 让 容器 有 能 力 让 其 子 项 目 能 够 改变 其 宽度 、 高 度 (甚至 顺序 ) ， 以 最 佳 方式 填充 可 用 空间 (主要 是 为 了 适应 所 有 类 型 的 显示 设备 和 屏幕 大 小 ) 。 


Dunn: W3C (World Wide Web Consortium) 指 万 维 网 联盟 ， 该 组 织 建 立 于 1994 年 ， 其 宗旨 是 通过 促进 通用 协议 的 发 展 并 确保 其 通用 型 ， 以 激发 Web 世 界 的 全 部 潜能 。 


目前 ， 主 流 浏览 器 都 已 经 很 好 地 支持 Flexbox 布 局 ， 如 图 2.5 所 示 。 


Firefox Chrome Safari 


* 


Android 
Browser 


Chrome for 


rr * 
Opera Mini Android 


Opera iOS Safari 


图 2.5 ”Flexbox 布 局 与 主流 浏览 器 的 兼容 性 


React Native 实 现 了 Flexbox 布 局 的 大 部 分 功能 ， 并 且 在 实际 应 用 开发 中 也 使 用 Flexbox 来 实现 布 
题 。 


局 。 这 不 仅 使 React Native 的 UI 开 发 变 得 更 加 简单 ， 还 很 好 地 解决 了 iOS、Android 等 屏幕 适 配 的 问 


Eds React Native 中 Flexbox 布 局 的 工作 原理 和 Web 开 发 基本 一 致 ， 只 有 少许 差异 。 例 如 ， 默 认 值 不 同 ，React Native 中 flexDirection 属 性 的 默认 值 是 column 而 不 是 row，alignItems 的 默认 值 是 stretch 而 不 


是 flex-statt， 另 外 ，flex 只 能 指定 一 个 数字 值 。 


为 了 方便 读者 理解 后 面 的 代码 ， 这 里 先 简单 介绍 React Native 开 发 中 Flexbox 布 局 的 使 用 。 


Flexbox 布 局 所 使 用 的 属性 ， 简 单 来 说 ， 可 以 分 为 以 下 两 个 。 


“ 决定 子 组 件 排列 规则 的 属性 ， 例 如 ，flexDirection、flexWrap、justifyContent 以 及 alignItems 等 。 


: 决定 组 件 自身 显示 规则 的 属性 ， 例 如 ，alignSelf 以 及 flex 等 。 


下 面 分 别 简单 介绍 这 些 属性 。 
2.4.1 flexDirection 设 置 组 件 的 排列 


flexDirection 


例如 ， 在 不 设置 flexDirection 的 情况 下 ， 下 面 代码 中 的 子 组 件 view1 和 view2 是 按照 默认 值 colum 


属性 表明 组 件 中 子 组 件 的 排列 方向 ， 取 值 有 column (默认 值 ) 、row 以 及 row-reverse。 


n 纵 向 排列 的 ， 代 码 如 下 : 


export default class flexbox extends Component ( 
render() ( 
return ( 
«View style={styles.container}> 
«View style={styles.viewl}></View> 
«View style={styles.view2}></View> 
«/Niew» 


{ 
ri 


} 
} 


const styles = StyleSheet.create ({ 

container: { 

flex: 1.backgroundColor:'gray', 

hr 

viewl: { 
height: 150, 
width: 150, 
backgroundColor: 'red' 
hy 
view2: { 
height: 150, 
width: 150, 
backgroundColor: 'green' 


n; 


// 页 面 根 View 


/ 子 组 件 viewl 
/ 子 组 件 view2 


// 子 组 件 view1 的 样式 


// 子 组 件 view2 的 样式 


Baz: 为 了 节约 篇 幅 ， 上 述 例子 中 只 附 上 了 关键 代码 ， 


效果 如 图 


2.6 所 示 。 


例如 导入 模块 或 组 件 的 代码 ， 形 如 import*from*。 但 是 读者 在 实际 开发 过 程 中 ， 千 万 不 要 忘记 先导 入 相关 模块 或 组 件 ， 否 则 会 发 生 错 误 。 


图 2.6 


当 将 flexDirection 属 性 设置 为 row 时 ， 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代码 


const styles = StyleSheet.create(( 
container: ( 
flex: 1, backgroundColor.'gray', 
flexDirection: 'row' 


// 子 组 件 view1 的 样式 
height: 150, 
width: 150, 
backgroundColor: 'red' 


// 子 组 件 view2 的 样式 
height: 150, 


width: 150, 
backgroundColor: 'green' 


n; 


那么 ， 子 组 件 view1 和 view2 将 按照 row 进 行 横向 排列 ， 效 果 如 图 


flexDirection/É 4 7j column Hf 89 z 


图 2.7 flexDirection 属 性 为 row 时 的 效果 


242 flexWrap 设 置 是 否 换行 


flexWrap 属 性 表明 子 组 件 “ 溢 出 ” 父 组 件 时 是 否 进 行 换行 ， 取 值 有 nowrap (默认 值 ) 、wrap 以 及 wrap-reverse。 


这 里 ， 所 谓 的 溢出 是 指 子 组 件 显 示 的 区 域 超出 了 父 组 件 的 空间 。 为 了 模拟 溢出 的 效果 ， 下 面 修改 view1 和 view2 的 大 小 ， 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代码 


const styles = StyleSheet.create ({ 

container: { 
flex: 1, backgroundColor: 'gray', 
flexDirection: 'row' 

1 

viewl: ( 
height: 200, 
width: 200, // 增 大 了 view1 的 宽度 
backgroundColor: 'red' 

" 

view2: ( 
height: 200, 
width: 200, // 增 大 了 view2 的 宽度 
backgroundColor: 'green' 


n; 


由 于 没有 设置 flexWrap， 所 以 当 view2 显 示 不 全 时 ， 会 按照 默认 值 nowrap 不 进行 换行 ， 效 果 如 图 2.8 所 示 。 


图 2.8 flexWrap 属 性 为 nowtrap 时 


当 将 flexWrap 属 性 设置 为 wrap 时 ， 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 


const styles = StyleSheet.create(( 
container: ( 
flex: 1, backgroundColor:'gray', 
flexDirection: 'row', 
flexWrap: 'wrap' 


2 { 
height: 200, 
width: 200, 
backgroundColor: 'red' 


7 
height: 2 
width: 7 
backgroundColor: 'green' 


n; 


此 时 ， 由 于 view2 和 view1 的 总 宽度 (200+200=400) 大 于 屏幕 的 宽度 (使 用 的 iPhone7 宽 度 =375) ， 所 以 view2 将 会 换行 显示 ， 效 果 如 图 2.9 所 示 。 


图 2.9 ”flexWrap 属 性 为 wrap 时 的 效果 


2.4.3 justifyContent 设 置 横向 排列 位 置 


justifyContent 属 性 表明 组 件 中 子 组 件 横向 排列 在 其 父 容器 的 哪个 位 置 ， 取 值 有 flex-start、flex-end、center、space-between 以 及 space-around。 


例如 ， 想 要 实现 子 组 件 水 平 居中 的 效果 ， 就 可 以 将 justifyContent 的 值 设置 为 center， 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代码 


const styles = StyleSheet.create(( 


container: ( 
flex: 1, backgroundColor 
flexDirection: 'row', 
justifyContent: 'center' 


{ 
height: 150, 
width: 150, 
backgroundColor: 


height: 150, 
widt 150, 
backgroundColor: 'green' 


n; 


效果 如 图 2.10 所 示 。 


图 2.10 justifyContent 属 性 为 center 时 的 效果 


244 alignltems 设 置 纵向 排列 位 置 


alignltems 属 性 表明 组 件 中 子 组 件 纵向 排列 在 其 父 容器 的 哪个 位 置 ， 取 值 有 flex-start、flex-end、center、baseline 以 及 stretch。 


alignltems 属 性 和 justifyContent 的 作用 相似 ， 只 是 justifyContent 决 定 了 子 组 件 横向 排列 的 位 置 ， 而 alignltems 决 定 了 子 组 件 纵向 排列 的 位 置 。 


如 果 想 要 实现 子 组 件 垂直 居中 的 效果 ， 那 么 就 可 以 将 alignltems 的 值 设 置 为 center， 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


03 const styles = StyleSheet.create(( 

04 container: ( 

05 flex: 1, backgroundColor:'gray', 
06 flexDirection: 'row', 
07 alignItems: 'center' 

08 lh 

09 viewl: ( 

10 height: 150, 

11 width: 150, 

12 backgroundColor: 'red' 
13 r 

14 view2: { 

15 height: 150, 

16 width: 150, 

17 backgroundColor: 'green' 
18 } 

19 he 


效果 如 图 2.11 所 示 。 


图 2.11 alignItems 属 性 为 center 时 的 效果 


了 justifyContent 和 alignltems 属 性 的 用 法 之 后 ， 想 必 读 者 很 容易 就 能 够 自己 实现 水 平 垂直 居中 的 效果 了 ， 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 


const styles = StyleSheet.create ({ 
container: { 

1, backgroundColor: 'gray', 
flexDirection: 'row', 
justifyContent: 'center', 
alignItems: 'center' 


height: 150, 
width: 150, 
backgroundColor: 'red' 


width: 150, 
backgroundColor: 'green' 


n; 


水 平 垂直 居中 的 效果 如 图 2.12 所 示 。 


图 2.12 ”使 用 justifyContent 和 alignItems 属 性 实现 水 平 重 直 居中 效果 


24.5 alignself 设 置 特定 组 件 的 排列 


alignSelf 属 性 表明 某 个 特定 组 件 的 排列 情况 ， 取 值 有 auto、flex-start、flex-end、center 以 及 stretch。 


这 里 以 center 为 例 ， 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代 丰 


const styles = StyleSheet.create ({ 
container: 
1, backgroundColor: 'gray', 


height: 150, 
width: 150, 
backgroundColor: 'red' 


height: 150, 

width: 150, 
backgroundColor: 'green', 
alignSelf: 'center' 


n; 


效果 如 图 2.13 所 示 。 


图 2.13 alignSelf 属 性 为 center 时 的 效果 


24.6 flex 设置 组 件 所 占 空间 


flex 属 性 可 以 让 组 件 动态 计算 和 配置 自己 所 占用 的 空间 大 小 ， 取 值 是 数值 。 
如 果 想 要 view1 和 view2 填 满 父 组 件 ， 并 且 view1 和 view2 的 大 小 相同 ， 使 用 flex 就 很 容易 实现 ， 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代码 
const styles = StyleSheet.create ({ 


container: { 
flex: 1 


1 t 


backgroundColor: 'red 


backgroundColor: 'green' 


n; 


效果 如 图 2.14 所 示 。 


flex 属 性 使 用 如 此 简单 ， 但 表现 力 却 非常 强大 ， 它 是 Flexbox 布 局 实现 自 适应 设备 和 屏幕 尺寸 的 核心 ， 读 者 需要 在 后 面 的 React Native 开 发 中 逐步 熟练 掌握 flex 属 性 的 使 用 。 


图 2.14 ”使 用 flex 属 性 实现 自 适应 屏幕 的 尺寸 大 小 


2.5 ”如 何 调 试 React Native 项 目 


在 实际 开发 中 ， 还 有 一 个 影响 开发 效率 的 重要 因素 ， 即 调试 。 


在 1.4.3 节 中 已 经 介绍 了 Enable Live Debugger 的 使 用 。 本 节 来 介绍 另 一 个 非常 重要 的 调试 选项 Debug JS Remotely 选 项 。 


(1) 晃动 设备 或 使 


模拟 器 上 的 快捷 键 〈iOSs 模 拟 器 快捷 键 command+D，Android 模 拟 器 快捷 键 command+M) 1T; 


调试 选项 ， 效 果 如 医 


2.15 所 示 。 


Reload 


Debug JS Remotely 


Enable Live Reload 


Start Systrace 


Enable Hot Reloading 


Show Inspector 


Show Parf Monitor 


L 48 用 er 时 jJ LI Te 用 oW E W ONE e "WE hoch 可 


Cancel 


图 2.15 React Native 调 试 选项 


(2) 单 击 Debug JS Remotely 选 项 。 此 时 ，React Native 会 自动 打开 Chrome 浏 览 器 作为 调试 工具 。 


(3) 按照 如 图 2.16 所 示 的 顺序 操作 ， 就 进入 了 React Native 应 用 的 调试 状态 。 


React Native Debugger X L3 


Q (y |© localhost:8081/debugger-ui * (] 


React Native JS code runs inside this Chrome tab. 


Práss to open Developer Tools.|Enable Pause On Caught Exceptions for a better debugging experience. 


Status: Debugger session #10002 active. 


[x à] Elements EN Jes etwork Timeline Profiles Application Security Audits 1 : KX 


Sources Content scripts » : |[[4 index.ios.js x PD ou : t y» © © Async 
v © top @ Serving from the file system? Add your files into the workspace. more never show x | v Threads 
v C localhost:8081 1 | /so * Main 
ki debugger-ui 2| x* Sample React Native App debuggerWorker.js 
* t ithub. -nati 
> CS (no domain) ; ^ a //github. com/facebook/react-native » Watch 
{Ë debuggerWorker.js 5 */ v Call Stack 
6 
v CS localhost:8081 p 
e 7 import React, {Component} from 'react'; Not Paused 
v Be Usery/yuanlin/Desktop/learnr 8 import {AppRegistry, StyleSheet, Text, View) from 'react-native'; PES 
> Bis node modules : m rub X ( 
- = 10 export default class flexbox extends Component Not Paused 
index.ios./s 11 render() { 
debuggerWorker.js 12 return ( v Breakpoints 
13 «View style-(styles.container)» 

?pl = ^ s Sünclnnint 
mina e «View style={styles. view1}></View> No Breakpoints 
require-0.js T " «View style-(styles.view2)»«/View» b XHR Breakpoints 
require-214.js - </View> 

17 ); » DOM Breakpoints 
T } } » Global Listeners 
20 » Event Listener Breakpoints 
21 const styles = StyleSheet.create(( 

22 container: ( 

23 flex: 1 

24 }, 

25 viewl: { 

26 height: 180, 

27 width: 180, 

28 backgroundColor: '$FF0000' 

29 }, 

30 view2: { 

31 height: 180, 

32 width: 180, 

33 backgroundColor: '#00FF00', 

34 alignSelf: 'center' 

35 

36|}); 

37 


38 AppRegistry.registerComponent('flexbox', () => flexbox); 


() Une 1, Column 1 (source mapped from index.ios.bundle) 


图 2.16 ”使 用 Chrome 浏 览 器 调试 React Native ™ Jf] 


(4) 在 调试 状态 下 ， 单 击 index.ios.js 文 件 第 12 行 的 行 数 来 添加 一 个 断 点 ， 如 图 2.17 所 示 。 


问题 : 软件 开发 中 的 断 点 是 什么 ? 


回答 : 断 点 (Breakpoint) 是 调试 器 的 功能 之 一 ， 调 试 时 设 定 断 点 可 以 让 程序 执行 到 该 行程 序 时 停 住 ， 借 此 观察 程序 到 断 点 位 置 时 ， 其 变量 、 暂 存 器 、L/O 等 相关 的 变数 内 容 ， 有 助 于 深入 了 解 程序 运作 
的 机 制 ， 发 现 、 排 除 程序 错误 。 


[x G] | Elements Console Sources Network Timeline Profiles Application Security Audits A1| : x 
Sources Content scripts » : | 四 indexiosjs x Poi au A + t | Q | CO Async 
v O top @ Serving trom the file system? Add your files into the workspace. more never show x | ¥ Threads 
- Ip7** * Mi 
vO localhost net 2| = Sample React Native App = - 
Bii debugger-ui 3| * https://github. com/facebook/react-native debuggerWorker.js 
> © (no domain) : or » Watch 
= 
v 4f debuggerWorker.js 6 v Call Stack 
v © localhost:8081 7 import React, {Component} from 'react'; Not Paused 
v [By Users/yuanlin/Desktop/learnr 8 import (AppRegistry, StyleSheet, Text, View) from 'react-native'; € 
9 Scope 
> fig node modules 10 export default class flexbox extends Component { x 
index.ios.js render() { Not Paused 
也 [ 21 return ( 
ty debuggerWorker.js «View style={styles.container}> een 
Bi index.ios.bundle?platform-ic 14 «View style={styles. view1}></View> index.ios.js:12 
RU 15 «View style-(styles.view2)»«/View» t ( 
fh require-0.js 16 </View> return 
[s require-214.js 17 . OO * XHR Breakpoints 
图 2.17 React Native 调 试 时 添加 断 点 
(5) 最 后 ， 重 新 加 载运 行 的 应 用 (iOS 模 拟 器 快捷 键 Command+R，Android 模 拟 器 快捷 键 R+R) 。 此 时 ， 应 用 运行 到 刚才 添加 断 点 的 第 12 行 时 就 停止 了 ， 如 图 2.18 所 示 。 
React Native Debugger x 林 
C ñ |© localhost:8081/debugger-ui * $ 9 


React Native JS code runs inside this Chrome tab. 


Press to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience. 
Status: Debugger session #14456 active. 


ES 


Elements Console Sources Network Timeline Profiles Application Security Audits 


—— 


Sources Content scripts »  : 
v O top 


四 


index.ios.|s x 


| @ Serving trom the file system? Add your files into the workspace. 


v © localhost:8081 
Bi debugger-ui 
Cn (no domain) 
> gË debuggerWorker.js 


此 时 ， 可 以 在 右 侧 的 调试 区 域 查看 这 些 信息 : 当前 应 用 执行 的 线程 状态 (Threads) 、 变 量 值 、 调 用 栈 (Call Stack) 等 信息 。 而 且 ， 还 可 以 使 用 调试 区 域 上 方 的 指令 来 实现 单 步 执 行 、 跳 过 执行 、 继 续 


执行 等 调试 操作 ， 如 图 2.19 所 示 。 


2 


WOnoauhw 


38 
39 


| * Sample React Native App 

x https://github.com/facebook/react-native 
| * (flow 

| = 


| import React, {Component} from 'react'; 
| export default class flexbox extends Component { 


| View style={styles.container}> 

«View style-(styles.viewl)»«/View» 
| «View style-(styles.view2)»«/View» 
| </View> 


| const styles = StyleSheet.create({ 
container: { 
flex: 1 


height: 180, 
width: 180, 
| backgroundColor: '#FF0000' 


LI 
| view2: { 
height: 180, 
| width: 180, 
backgroundColor: '£00FF00', 
alignSelf: 'center' 


} 
Ds 


{} Line 12, Column 1 


图 2.18 React Native 调 试 时 在 断 点 处 暂停 运行 


| import {AppRegistry, StyleSheet, Text, View} from 'react-native'; 


| AppRegistry.registerComponent('flexbox', () => flexbox); 


index.ios.js:12. 


eLifeCyclePerf 
„rend ReactCompositeC...ponent.js:1044 
erValidatedComponentWithoutOwnerOrC 


vow Bi Fh 
_rend d t.js:1075) 


erValidatedComponent 

perfor ReactCompositeComponent.js:484 
minitialMount 

mount ReactCompositeComponent.js:346| 
Component 
mountComponent 
mountChildren 


ReactReconciler.js:61 
ReactMultiChild.js:263 


mountComponent 
perfor ReactCompositeComponent.js:495 
minitialMount 

mount ReactCompositeComponent.is:346 . 


ReactReconciler.js:61 


IF A +t t 


图 2.19 React Native 调 试 时 的 调试 指令 


调试 技巧 和 经 验 是 需要 在 开发 过 程 中 不 断 积累 的 ， 读 者 在 掌握 了 这 些 基本 用 法 之 后 ， 可 以 通过 后 面 的 例子 不 断 练习 ， 积 累 开发 经 验 ， 提 高 自己 的 调试 能 力 和 开发 效率 。 


2.6 ”实战 一 一 设计 一 个 电 商 App 


在 掌握 了 Git、JSX、Flexbox 布 局 和 React Native 调 试 等 React Native 开 发 的 基础 知识 之 后 ， 终 于 要 进入 期 待 已 久 的 实战 环节 了 。 


2.6.1 电 商 App 的 模块 划分 


实战 是 不 是 意味 着 立刻 开始 写 代码 呢 ? 
No, No, No! 在 实际 的 软件 开发 过 程 中 ， 开 发 并 不 意味 着 只 有 编写 代码 这 一 个 环节 。 在 编写 代码 之 前 ， 需 要 有 一 个 清晰 的 思路 和 整体 的 设计 。 


(1) 使 用 React Native 命 令 行 工具 新 建 项 目 ch03。 


react-native init ch03 


Lus. React Native 命 令 行 工具 的 使 用 可 以 参考 第 1 章 。 


(2) 如 果 ch03 项 目的 代码 是 从 远程 仓库 下 载 的 ， 那 么 还 需要 安装 React Native 依 赖 包 。 


cd ch03 
npm install // 或 者 使 用 cnpm 安 装 : cnpm install 


(3) 使 用 Atom 打 开 ch03 项 目 。 分 别 打开 iOS App 和 Android App 的 入 口 文件 index.iosjs 和 index.android.js， 如 图 2.20 所 示 。 


Component { x j ext is Component { 
r() 


«View 
«Text 
Welcome to React N el e to React Native 


get started, edit index.ios.js o get start edit index.android.js 
«/Text» </Text> 
<Text style - : <Text style = > 
Press Cmd+R to 


r 
Cmd+D or shake for dev menu Shake or press menu button for dev menu 


eload, |'^ Double tap R on your keyboard to reload, 


«/Text» 
«/Niew» 


1 
contair : container: 
flex: 1, 
Content: 


' 


alignItems: 'cen a nter', 


backgroundColor: backgroundColor: '#F5FCFF', 


ome: { 
fontSize: 


textAlign: 


) 


instructions: { 


textAlign: 'center', 
color: '4333333 


marginBottom: 


图 2.20 iOS App 入 口 文件 index.ios.js 和 Android AppA 9 X fFindex.android.js 


关于 React Native 项 目 结构 和 文件 的 详细 说 明 ， 读 者 可 以 参考 第 1 章 。 


E 


心 的 读者 或 许 已 经 发 现 了 问题 :index.ios.js 和 index.android.js 文 件 里 的 逻辑 和 内 容 几乎 完全 相同 。 


虽然 ， 独 立 的 平台 入 口 文件 可 以 让 React Native 开 发 的 OS App 和 Android App 拥 有 自己 独立 的 设计 和 实现 ， 但 是 这 样 却 不 能 最 大 限度 地 发 挥 React Native 的 优势 ， 即 跨 平台 应 用 开发 时 逻辑 和 实现 的 


(4) 为 了 解决 这 个 问题 ， 可 以 将 iOS、Android 平 台 相 同 的 逻辑 和 实现 放 到 一 个 单独 的 文件 中 。 在 ch03 项 目 中 新 建 appjs 文 件 ， 并 添加 代码 如 下 : 


01 import React, (Component) from 'react'; 
02 import (AppRegistry, StyleSheet, Text, View) from 'react-native'; 


04 export default class app extends Component ( // 新 建 名 为 app 的 组 件 

05 render() ( // 泻 染 页 面 的 函数 

06 return ( 

07 <View style={styles.container}> 

08 <Text style={styles.welcome}> 

09 Welcome to React Native! 

10 </Text> 

11 «Text style={styles.instructions}> 

12 To get started, edit index.js 

13 «/Text» 

14 «Text style-(styles.instructions]» 

15 Press Cmd+R (iOS) or Double tap R (Android) to 
reload, {'\n'} 

16 Shake or press menu button for dev menu 

17 «/Text» 

18 «/Niew» 


21 } 


23 const styles = StyleSheet .create ({ // 创建 样式 

24 container: ( // 页 面 根 View 的 样式 
25 flex: 1, 

26 justifyContent: 'center', 

27 alignItems: 'center', 

28 backgroundColor: '#F5FCFF' 


30 welcome: ( //“ 欢 迎 “ 文 本 的 样式 
31: fontSize: 20, 

32 textAlign: 'center', 

33. margin: 10 

34 ty 

35 instructions: { // "说 明 "文本 的 样式 

36 textAlign: 'center', 

37 color: '4333333', 

38 marginBottom: 5 


40 n; 


appjs 文 件 中 的 代码 和 之 前 index.iosjs 和 index.android.js 文 件 的 代码 几乎 相同 ， 所 以 在 此 就 不 详细 解释 了 。 


(5) 修改 index.iosjs 的 代码 如 下 : 


01 import React, (Component) from 'react'; 

02 import (AppRegistry) from 'react-native'; 

03 import app from './app'; 

04 

05 AppRegistry.registerComponent ('ch03', () => app); 


这 里 需要 说 明 的 是 ， 修 改 前 的 index.ios:js 是 直接 使 用 本 文件 内 定义 的 组 件 ch03， 代 码 如 下 : 


01 export default class ch03 extends Component ( 

02 // 详情 参考 新 建 ch03 项 目 时 的 代码 

03 } 

04 

05 AppRegistry.registerComponent('ch03', () => 'ch03'); 


(6) 现在 ， 通 过 import 方 式 导 入 刚才 新 建 的 组 件 app。 同 时 ， 将 registerComponent 方 法 的 第 2 个 参数 修改 为 导入 的 app 组 件 。 


此 时 ， 当 重新 加 载 iOS App 时 ， 效 果 到 | 底 如 何 呢 ? 效果 如 图 2.21 所 示 。 


(7) 既然 iOs App 运 行 正常 ， 那 赶紧 再 看 看 如 何 修改 index.android.js 文 件 吧 。index.android.js 文 件 的 代码 修改 如 下 : 


01 import React, (Component) from 'react'; 

02 import (AppRegistry) from 'react-native'; 

03 import app from './app'; 

04 

05 AppRegistry.registerComponent ('ch03', () => app); 


重新 加 载 Android App， 效 果 如 图 2.22 所 示 。 


Carrier F 2:42 PM =. 


Welcome to React Native! 


To get started, edit index.)s 


Press Cmd+R (iOS) or Double tap R (Android) to reload, 
Shake or nress menu button for dev menu 


rr 


图 2.21 使 用 app.js 的 iOS App 运 行 效果 


Welcome to React Native 


VTL - 


To get started, edit index.js 


Press Cmd+R (iOS) or Double tap R (Android) to reload, 
Shake or press menu button for dev menu 


12.22 ”使 用 app.js 的 Android App 运 行 效果 


Eus 3f React Native 项 目 后 ， 首 次 执行 react-native run-android 可 能 会 发 生 The SDK directory does not exist 的 错误 (如 图 2.23 所 示 ) ， 此 时 需要 在 React Native 项 目的 android 文 件 夹 下 新 建 local.properties 
文件 ， 并 添加 配置 sdk.dir=/path/to/android/sdk/tools。 


这 样 只 需要 维护 app.js 这 一 个 文件 ， 就 可 以 实现 iOS App 和 Android App 的 同时 更 新 了 。 


最 后 回顾 一 下 当前 ch03 项 目的 文件 结构 : 


index.ios.js // iOS App 入 口 文件 
---- 引用 app.js 
index.android.js // Android App 入 口 文件 


---- 引用 app.js 


+ ch03 master) x react-native run-android 


JS server already running. 
Building and installing the app on the device (cd android && ./gradlew installDebug)... 


* What went wrong: 
A problem occurred configuring project ':app'. 
» The SDK directory '/usr/local/opt/android-sdk' does not exist. 


è Try: 
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log 


Total time: 5.47 secs 


图 2.23 react-native run-android X, # £] Android SDK # iz 


除了 上 述 不 同 平台 入 口 复 用 appjs 的 设计 之 外 ， 完 整 的 软件 开发 流程 还 包括 需求 分 析 与 设计 、 软 件 概要 与 详细 设计 、 编 写 代 码 、 测 试 、 发 布 与 更 新 等 一 系列 的 流程 。 


就 React Native 开 发 来 说 ， 开 发 的 一 般 流程 如 图 2.24 所 示 。 


开发 上 线 


图 2.24 React Native 应 用 开发 的 一 般 流程 


Ap 上 述 React Native 开 发 流程 基于 传统 的 “瀑布 流 ”， 虽 然 “瀑布 流 ” 是 比较 传统 的 开发 流程 ， 但 是 当今 软件 开发 中 流行 的 “敏捷 开发 ”和 “快速 选 代 ”仍然 是 基于 “瀑布 流 ” 的 ， 所 以 了 解 和 
误 悉 “瀑布 流 ” 的 软件 开发 流程 仍然 很 有 必要 。 


本 书 除 了 需求 环节 不 做 讨论 之 外 ， 无 论 是 设计 、 开 发 (测试 暂 不 包含 ) 以 及 上 线 都 会 有 详细 的 介绍 和 说 明 ， 笔 者 也 非常 期 望 本 书 能 帮助 读者 邑 开 React Native 开 发 的 大 门 。 


先 笔者 对 要 开发 的 应 用 做 个 简单 的 了 解 和 框架 性 的 解剖 。 通 常 ， 电 商 类 的 应 用 首页 主要 由 如 图 2.25 所 示 的 几 个 部 分 组 成 。 


Ap 为 了 实现 上 述 产品 设计 效果 图 ， 本 书 使 用 的 工具 是 Sketch (http ketchapy V) ， 它 是 一 款 流行 的 矢量 图 设计 工具 ， 深 受 移动 平台 设计 师 的 喜爱 。 如 果 读 者 感 兴趣 的 话 ， 可 以 下 载 试 


用 版 体验 一 下 。 


首页 布局 的 结构 从 上 到 下 依次 如 下 。 

-RA 显示 设备 网 络 、 时 间 、 电 量 等 信息 。 
MRA: 提供 搜索 输入 框 和 按钮 ， 用 于 搜索 商品 。 
“ 轮 播 广告 : 循环 播放 广告 和 推荐 信息 。 


“ 商品 列表 : 展示 所 有 商品 的 列表 。 


9:41 AM AA zT. 


ur 


My 更 优 于 


商品 列表 


图 2.25 首页 布局 的 结构 


按照 上 述 分 析 的 页 面 结构 ， 修 改 appjs 文 件 的 代码 如 下 : 


01 export default class app extends Component ( 

02 render() ( 

03 return ( 

04 «View style={styles.container}> 

05 «View style={styles.searchbar}> // 搜索 框 
06 <Text> 

07 搜索 框 

08 </Text> 

09 </View> 

10 «View style={styles.advertisement }> // 轮 播 广告 
XT «Text» 

12 dem 

13 «/Text» 

14 «/Niew» 

15 «View style={styles.products}> // 商品 列表 
16 <Text> 

17 商品 列表 

18 «/Text» 

19 </View> 

20 </View> 


23 } 


25 const styles = StyleSheet.create ({ 

26 container: { 

27 flex: 1 

28 ) 

29 searchbar: { // 搜索 框 的 样式 
30 marginTop: 20, // 空 出 了 状态 栏 的 高 度 20 
31 height: 40, 

32 backgroundColor: 'red', 

33 justifyContent: 'center', 

34 alignItems: 'center' 

35 }, 

36 advertisement: { // 轮 播 广告 的 样式 
37 height: 180, 

38 backgroundColor: 'green', 

39 justifyContent: 'center', 

40 alignItems: 'center' 

41 h 

42 products: ( // 商品 列表 的 样式 
43 flex: 1, 

44 backgroundColor: 'blue', 

45 justifyContent: 'center', 

46 alignItems: 'center' 


因为 状态 栏 比较 特殊 ， 所 以 这 里 没有 明确 配置 状态 栏 ， 而 使 用 了 默认 配置 。 更 多 关于 状态 栏 的 使 用 和 详细 配置 ， 将 在 2.6.6 节 中 详细 讨论 。 


上 述 代 码 中 marginTop 的 用 法 和 2.4 节 中 的 CSS “盒子 模型 ”是 完全 一 样 的 ， 只 是 因为 JavaScript 采 用 “驼峰 命名 法 ”， 所 以 才 和 CSS“ 盒 子 模型 ”中 的 margin-top 有 所 差异 。 


重新 加 载 iOS App 看 下 效果 ， 如 


2.26 所 示 。 这 里 用 到 了 一 个 Flexbox 布 局 的 技巧 。 


D 


“ 搜索 框 高 度 是 国定 的 40， 即 height: 40. 
+ 轮 播 广告 高 度 是 国定 的 180， 即 height: 180. 


“ 商品 列表 高 度 的 需求 应 该 是 除 状态 栏 、 搜 索 框 、 轮 播 广 告 之 外 屏幕 剩余 的 高 度 ， 解 决 办 法 就 是 flex: 1。 


接着 再 来 看 一 下 应 用 在 Android 设 备 上 的 运行 效果 ， 如 


IR] 


2.27 所 示 。 
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图 2.26 iOS App 首 页 布局 


q O 


图 2.27 Android App 首 页 布局 
Android App 显 示 有 点 小 问题 : 搜索 框 和 状态 栏 之 间 空 出 了 一 块 区 域 ! 
为 什么 在 iOS 上 好 好 的 ， 在 Android 上 显示 效果 却 不 一 样 呢 ? 


原来 ， 这 是 因为 ijOS 和 Android 对 状态 栏 处 理 的 方式 不 同 导致 的 。 在 默认 情况 下 ，iOSs 平 台 内 容 显示 区 域 是 从 屏幕 项 部 开始 的 ， 为 了 不 和 状态 栏 重 肆 ， 代 码 中 添加 了 marginTop: 20; 而 Android 平 台 内 
容 显示 区 域 默认 就 是 不 包括 状态 栏 的 ， 所 以 代码 中 添加 的 marginTop: 20 就 变 成 了 空 出 来 的 这 块 区 域 。 


当然 ，React Native 考 虑 到 了 平台 的 差异 性 ， 已 经 为 开发 者 提供 了 Platform 来 判断 当前 运行 的 系统 。Platform.OS 在 iOS 系 统 上 会 返回 ios， 而 在 Android 设 备 或 模拟 器 上 则 会 返回 android， # 


在 不 同 平台 上 设置 不 同 的 marginTop 值 。 


所 以 ， 使 用 Platform 来 修改 appjs 文 件 中 的 布局 代码 如 下 : 


allt, ALA 


01 import React, {Component} from 'react'; 
02 import ( 
03 AppRegistry, 
04 StyleSheet, 
05 View, 
06 Text, 
07 Platform // 注意 : 这 里 必须 首先 import Platform 
08 } from 'react-native'; 
09 
10 // 这 里 省 略 了 没有 修改 的 代码 
1 
12 const styles = StyleSheet.create(( 
13 /这 里 省 里 子 没有 修改 的 从 三 
14 searchbar: ( 
15 marginTop: Platform.OS === 'ios' 
16 ? 20 
17 : 0, // ios 设 备 上 marginTop 为 20，RAndroid 设 备 上 marginTop 为 0 
18 height: 40, 
19 backgroundColor: 'red', 
20 justifyContent: 'center', 
21 alignItems: 'center' 
22 l, 
3 // 这 里 省 略 了 没有 修改 的 代码 
D; 


Cus. 当 使 用 新 的 模块 或 组 件 时 (例如 这 里 的 Platform) 时 ， 首 先 必须 要 在 文件 头 导 入 该 模块 或 组 件 (import (Platform) from'react-native'; ) ， 否 则 会 发 生 无 法 找到 变量 Platform 的 错误 。 


2.6.3 ”实现 搜索 栏 


在 理 清 了 应 用 的 整体 布 


图 2.28 ”顶部 搜索 框 的 结构 


React Native 已 经 为 开发 者 提供 好 了 相应 的 UI 组 件 : 输入 框 使 用 Textlnput 组 件 ， 按 钮 使 用 Button 组 件 。 


所 以 ， 修 改 appjs 文 件 的 代码 如 下 : 


局 之 后 ， 就 可 以 集中 精力 来 依次 实现 每 个 UI 组 件 。 对 于 项 部 的 搜索 框 ， 主 要 由 以 下 两 个 部 分 组 成 ， 如 


图 2.28 所 示 。 


export default class app extends Component ( 
render() { 
return ( 
«View style={styles.container}> 
«View style={styles.searchbar}> 
<TextInput style-(styles.input) placeholder- HX 
商品 '»«/TextInput» 
«Button style={styles.button} title- Hx '></Button> 
«/Niew» 
«View style-(styles.advertisement]» 
<Text> 
轮 播 广告 
«/Text» 
</View> 
<View style={styles.products}> 
<Text> 
商品 列表 
</Text> 
</View> 
</View> 


} 


const styles = StyleSheet.create ({ 
// 这 里 省 略 了 没有 修改 的 代码 
searchbar: ( 
marginTop: Platform.OS === 'ios 
? 20 
: 0, 
height: 40, 
flexDirection: 


1 


1 1 


row 


flex: 1, 
borderColor: 'gray', 
borderWidth: 2 


button: ( 
flex: 1 


] 
// 这 里 省 略 了 没有 修改 的 代码 


其 中 ，TextInput 中 Placeholder 的 作用 是 在 TextInput 中 还 没有 输入 任何 文字 时 ， 显 示 提示 语 。 运 行 效果 如 图 2.29 所 示 。 
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图 2.29 搜索 杠 
Aez: 为 了 描述 的 简洁 ， 这 里 没有 将 多 个 平台 的 运行 效果 全 部 截图 说 明 。 本 书 如 果 没 有 特别 说 明 的 话 ， 默 认 iOS 和 Android 的 效果 是 相同 的 。 


不 过 细心 的 读者 可 能 会 发 现 这 样 一 个 问题 ， 如 图 2.30 所 示 。 


Warning: Failed prop type: The prop onPress is 
marked as required in Button , but its value is un... 


单 击 这 个 警告 ， 查 看 警告 的 详细 描述 ， 如 图 2.31 所 示 。 


Warning encountered 1 time. 


Warning: Failed prop type: The prop 
‘onPress is marked as required in Button `, 


but its value is undefined . 
in Button (created by app) 
in app 
in RCTView (created by View) 
in View (created by AppContainer) 
in RCTView (created by View) 
in View (created by AppContainer) 
in AppContainer 


图 2.31 查看 警告 的 详细 描述 


这 个 警告 是 告诉 开发 者 : Button 的 onPress 属 性 没有 实现 。 由 于 按钮 的 响应 事件 处 理会 在 2.6.6 节 中 详细 讨论 ， 所 以 这 里 选择 Dismiss 或 Dismiss All 忽 略 该 警告 即 可 。 


Dus: 实际 开发 过 程 中 ， 开 发 者 需要 仔细 阅读 警告 信息 ， 并 解决 警告 描述 的 问题 ， 千 万 不 要 忽略 警告 ! 


2.64 ”设计 轮 播 广告 


React Native 提 供 的 ScrollView 和 ViewPager 组 件 都 可 以 实现 轮 播 广告 的 效果 。 但 是 ViewPager 是 Android 平 台 特 有 的 组 件 ， 因 此 ， 为 了 考虑 平台 兼容 性 和 代码 复 用 性 ， 这 里 使 用 ScrollView 来 实现 轮 


播 效果 。 


Dan: Aa 
台 特 有 的 ， 例 如 ，Drawe 


1. ScrollView 的 使 


命名 的 后 组 可 以 看 出 哪些 组 件 是 iDOS 平 台 特 有 的 ， 例 如 ，DatePickerIOS、DatePickerIOS、PickerIOS、ProgressViewIOS、SegmentedControlIOS 以 及 TabBarIOS 等 ， 哪 些 组件 是 Android 平 
tLayoutAndroid、ProgressBarAndroid、ToolbarAndroid 以 及 ViewPagerAndroid 等 。 


首先 来 看 下 ScrollView 的 基本 用 法 和 效果 ， 修 改 app.js 文 件 代码 如 下 : 


01 export default class app extends Component ( 
02 render() ( 
03 return ( 
04 «View style={styles.container}> 
05 // 这 里 省 略 了 没有 修改 的 代码 
06 «View style={styles.advertisement}> 
07 <ScrollView 
08 ref-"scrollView" // 可 以 使 用 this.refs. 
scrollView 来 获取 该 组 件 
09 horizontal={true} // 横向 滚动 
10 showsHorizontalScrollindicator={false} 
// 不 显示 横向 滚动 条 
11 pagingEnabled={true} // 分 页 
12 ><Text style={{ 
13 width: 100, 
14 height: 180, 
15 backgroundColor: 'gray' 
16 }}> 广 告 1</Text> 
17 «Text style={{ 
18 width: 100, 
19 height: 180, 
20 backgroundColor: 'orange' 
21 }}> 广 告 2</Text> 
22 «Text style={{ 
23 width: 100, 
24 height: 180, 
25 backgroundColor: 'yellow' 
26 } }> 广 告 3</Text> 
27 </ScrollView> 
28 </View> 
29 // 这 里 省 略 了 没有 修改 的 代码 
30 </View> 


31 


33 } 

34 

35 const styles = StyleSheet.create ({ 
36 // 这 里 省 略 了 没有 修改 的 代码 
37 advertisement: { 

38 height: 180 

39 }, 

40 // 这 里 省 略 了 没有 修改 的 代码 
41 n; 


ScrollView 的 滚动 方向 默认 是 纵向 的 ， 为 了 实现 横向 轮 播 图 的 效果 ， 将 其 滚动 方向 设置 成 水 平 ， 即 horizontal={true}， 同 时 还 开启 了 分 页 效果 pagingEnabled={true}。 另 外 ， 在 ScrollView 中 ， 添 加 了 
3 个 Text 子 组 件 ， 分 别 显示 3 个 广告 页 面 。 这 里 为 了 更 清楚 地 看 到 所 有 页 面 ， 给 3 个 广告 页 面 添加 了 不 同 的 背景 色 ， 并 且 页 面 宽度 设置 得 比较 小 ， 如 width: 100， 这 样 3 个 广告 页 面 可 以 同时 显示 在 屏幕 上 。 效 
果 如 图 2.32 所 示 。 
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图 2.32 ScollView 3: 3,4648 I] 


在 熟悉 了 ScrollView 的 基本 用 法 之 后 ， 接 着 来 进一步 完善 轮 播 广告 的 效果 : 设置 每 一 个 广告 页 的 宽度 为 屏幕 宽度 。 


同样 ，React Native 已 经 提供 了 API: Dimensions 来 获取 屏幕 的 宽 高 。 


所 以 ， 将 Text 组 件 的 宽度 从 width: 100 修 改 成 width: Dimensions.get ('window') .width， 详 细 代码 如 下 : 


更 多 关于 React Native API 的 内 容 ， 本 书后 面 的 章节 会 有 详细 和 完整 的 说 明 。 


01 export default class app extends Component { 

02 render() { 

03 return ( 

04 «View style={styles.container}> 

05 // 这 里 省 略 了 没有 修改 的 代码 

06 «View style={styles.advertisement}> 

07 <ScrollView 

08 ref="scrollView" 

09 horizontal={true} 

10 showsHorizontalScrollindicator={ false} 
1l pagingEnabled={true} 

12 ><Text style={{ 

13 width: Dimensions.get ('window') .width, 
14 height: 180, 

15 backgroundColor: 'gray' 

16 }}> 广 告 1</Text> 

17 <Text style={{ 

18 width: Dimensions.get ('window') .width, 
19 height: 180, 

20 backgroundColor: 'orange' 

21 } }> 广 告 2</Text> 

22 «Text style={{ 

23 width: Dimensions.get ('window') .width, 
24 height: 180, 

25 backgroundColor: 'yellow' 

26 }} 27°49 3</Text> 

27 </ScrollView> 

28 </View> 

29 // 这 里 省 略 了 没有 修改 的 代码 

30 </View> 

31 ) 7 

32 H 

33 } 


新 加 载 应 用 ， 效 果 如 图 2.33 所 示 。 
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搜索 


改进 的 轮 播 图 效果 


3. 让 轮 播 广告 动 起 来 


距离 完整 的 轮 播 图 效果 就 只 差 一 步 了 : 让 轮 播 图 动 起 来 ， 即 每 隔 一 段 时 间 自 动 切 换 到 下 一 页 面 ， 并 且 当 处 在 最 后 一 个 页 面 时 ， 再 回 滚 到 第 一 个 页 面 。 


在 appjjs 文 件 中 添加 代 | 


export de 


ount() { 
tartTimer(); 


17 componentWillUnmount() ( 


18 clearInterval (this.interval); 
19 H 
20 
21 _startTimer() { 
22 this.interval = setInterval(() => { // 使 用 setInterval () 创 
建 定时 器 
23 nextPage = this.state.currentPage + 1; 
24 if (nextPage »- 3) ( 
25 nextPage = 0;  // 如 果 已 经 滚动 到 最 后 一 页 ， 下 次 返回 第 一 页 
26 } 
27 
28 this.setState((currentPage: nextPage]); 
// 更 新 this.state 中 currentPage 的 值 

29 const offSetX = nextPage * Dimensions.get ('window') .width7 

// 计算 ScrollView 滚 动 的 X 轴 偏 移 量 〈 因 为 是 横向 滚动 ) 
30 this.refs.scrollView.scrollResponderScrollTo((x: offSetX, 

y: 0, animated: true]); 
31 ), 2000); // 设置 定时 器 的 间隔 为 2s 
32 H 
33 } 


在 上 述 代 码 中 ， 读 者 需要 关注 的 是 构造 函数 中 的 this.state。 从 代码 中 可 以 看 出 ，state 是 一 个 字典 类 型 的 数据 ， 主 要 用 于 存储 组 件 相关 的 数据 ， 例 如 ， 轮 播 图 当前 显示 页 面 的 序号 。 


Dus. 除了 state，props 也 可 以 用 来 存储 组 件 相 关 的 数据 。 但 是 props 通 常 是 在 父 组 件 中 指定 的 ， 而 且 一 经 指定 ， 在 被 指定 的 组 件 的 生命 周期 中 则 不 再 改变 ， 所 以 对 于 需要 政变 的 数据 ， 使 用 state。 
4. 组 件 的 生命 周期 


上 述 实 现 中 ， 可 能 会 让 读者 感到 困惑 的 是 componentDidMount () 和 componentWillUnmount () 函数 。 这 里 来 深入 了 解 下 React Native 开 发 中 组 件 的 生命 周期 以 及 相关 的 函数 (包括 


componentDidMount () 和 componentWillUnmount () ) 。 


在 React Native 项 目 中 ， 所 有 展示 的 界面 都 可 以 看 做 是 一 个 组 件 (Component) ， 只 是 功能 和 逻辑 的 复杂 程度 不 同 。 例 如 ，appjjs 文 件 中 声明 的 app 组 件 ， 它 就 是 继承 自 React.Component， 代 码 如 


F: 
01 import React, {Component} from 'react'; 
02 import {AppRegistry, StyleSheet, Text, View} from 'react-native'; 
03 
04 export default class flexbox extends Component { 
05 // 这 里 省 略 了 无 关 的 代码 


组 件 的 生命 周期 可 以 分 为 加 载 、 更 新 以 及 卸载 ， 每 一 个 生命 周期 都 提供 了 一 些 方法 供 开 发 者 重 写 ， 以 实现 相应 的 需求 和 功能 。 其 中 ， 最 常用 的 加 载 和 仓 载 的 函数 调用 流程 如 图 2.34 所 示 。 
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componentWillUnmount 


componentWillMount 


componentDidMount 


图 2.34 组 件 生命 周期 


在 了 解 了 组 件 的 生命 周期 之 后 ， 为 了 给 轮 播 广告 添加 自动 滚动 的 效果 ， 可 以 在 页 面 泻 染 好 之 后 的 componentDidMount () 函数 中 启动 定时 器 ， 在 定时 器 中 按照 一 定 的 时 间 间 隔 自动 播放 下 一 页 ; 当 组 
件 卸 载 时 ， 在 componentWilunmount () 函数 中 销毁 定时 器 。 


至 此 ， 一 个 满意 的 轮 播 广告 效果 也 实现 了 。 


2.6.5 “展示 商品 列表 
列表 功能 是 应 用 开发 中 最 常见 的 功能 之 一 ， 为 了 实现 商品 列表 ， 可 以 使 用 React Native 提 供 的 ListView 组 件 。 
ListView 组 件 是 React Native 开 发 中 常用 的 组 件 ， 同 时 也 是 React Native 最 核心 的 组 件 之 一 ， 主 要 用 来 高 效 地 显示 一 个 可 以 垂直 滚动 变化 的 数据 列表 。 对 于 如 此 重要 的 组 件 ， 赶 紧 来 一 探究 竟 吧 。 


在 appjjs 文 件 中 添加 ListView 相 关 代 码 如 下 : 


01 const ds = new ListView.DataSource ({ // 创建 ListView.DataSource 数 据 源 

02 rowHasChanged: (rl, r2) => rl !== r2 

03 n; 

04 

05 export default class app extends Component ( 

06 constructor(props) ( 

07 super (props) ; 

08 this.state = { 

09 currentPage: 0, 

10 dataSource: ds.cloneWithRows ([ // 为 数据 源 传递 一 个 数组 

11 "商品 1 

12 "商品 2 

13 ! 商 品 3'， 

14 "iin", 

15 "i5, 

16 "商品 6"， 

17 "ion", 

18 ' 商 品 8'， 

19 "商品 9"， 

20 "商品 10， 

21 1 

22 le 

23 } 

24 

25 render () { 

26 return ( 

27 <View style={styles.container}> 

28 /这 时 局 请 了 没有 修改 的 代码 

29 «View style={styles.products}> 

30 <ListView dataSource={this.state.dataSource} renderRow= 
{this. renderRow}/> 

31 </View> 7 

32 </View> 

33 ) 7 

34 } 

35 

36 // 这 里 省 略 了 没有 修改 的 代码 

37 

38 .renderRow = (rowData, sectionID, rowID) => ( 

39 return ( 

40 «View style={styles.row}> 

41 <Text>{rowData}</Text> // 标签 中 使 用 {value} 的 方法 取 值 

42 </View> 

43 

44 } 

45 } 


同时 ， 修 改 样式 和 布局 的 代码 如 下 : 


01 const styles = StyleSheet.create(( 
02 VILLEN T AERIS 

03 products: { 

04 flex: 1 

05 ) 

06 row: { 

07 height: 60, 

08 justifyContent: 'center', 
09 alignItems: 'center' 
10 } 

11 ye 


此 时 ，ListView 组 件 的 实际 运行 效果 如 图 2.35 所 示 。 


图 2.35 ListView 实现 的 商品 列表 


从 上 述 例子 可 以 看 出 ， 使 用 ListView 组 件 必 须 实现 以 下 两 个 属性 。 


hep 
ae 
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+ dataSource: ListView 组 件 的 数据 源 。 这 里 使 用 state 来 保存 数据 。 提 供给 数据 源 的 rowHasChanged () 函数 告诉 ListView 组 件 是 否 需要 得 
“ tenderRow () : 该 函数 根据 数据 源 中 每 一 条 数据 ， 返 回 列表 每 一 行 显 示 的 组 件 。 它 的 函数 原型 为 (rowData, sectionID, rowID, highlightRow) =>renderable。 


当然 ，ListView 组 件 的 属性 和 用 法 远 不 止 现在 介绍 的 这 些 ， 随 着 应 用 开发 的 深入 ， 后 面 还 将 介绍 更 多 ListView 的 属性 和 用 法 。 


2.6.6 ”实现 交互 功能 和 状态 栏 
至 此 ， 首 页 的 主要 内 容 就 已 经 基本 完成 了 。 不 知道 细心 的 读者 有 没有 发 现 这 样 的 问题 : 本 例 应 用 ( 除 搜索 框 外 ) 还 不 能 接收 和 响应 任何 的 用 户 操作 。 那 么 现在 就 来 给 这 些 UI 组 件 添加 单 击 操作 的 响应 。 


1. 让 搜索 框 能 响应 用 户 操作 
给 搜索 框 的 “搜索 ”按钮 添加 单 击 响应 ， 修 改 搜索 框 的 代码 如 下 : 


01 export default class app extends Component ( 
02 7/ CREAR TB ELI SE 


03 


render() ( 
return ( 
«View style={styles.container}> 
«View style={styles.searchbar}> 
XTextInput style-(styles.input) placeholder- HX 
商品 '»«/TextInput» 
«Button 


() => Alert .alert (' 你 单 击 了 搜索 按钮 '， 
null, null) }></Button> 
</View> 
// 这 里 省 略 了 没有 修改 的 


</View> 


从 上 述 代码 中 可 以 看 出 ， 为 Button 组 件 添加 单 击 响应 比较 简单 ， 只 需要 实现 onPress () 函数 。 在 onPress () 函数 中 ， 使 用 了 一 个 新 的 Alert 组 件 用 来 弹出 提醒 ， 提 示 用 户 单 击 了 搜索 按钮 ， 如 图 2.36 
所 示 。 


你 点 击 了 搜索 按钮 


OK 


图 2.36 ”搜索 按钮 单 击 响应 


Du. 实现 Button 组 件 的 onPress () 函数 不 仅仅 可 以 添加 单 击 响应 ， 还 解决 了 2.6.3 节 中 顶部 搜索 栏目 中 的 警告 问题 


2. 给 轮 播 图 和 商品 列表 添加 单 击 响应 


这 里 读者 可 能 会 犯难 : 轮 播 图 和 商品 列表 不 是 Button 组 件 ( 轮 播 图 是 Text 组 件 ， 商 品 列表 是 View 组 件 ) ， 所 以 需要 使 用 一 个 新 的 React Native 组 件 TouchableHighlight。 


TouchableHighlight 组 件 主要 用 于 封装 其 他 组 件 ， 使 其 可 以 正确 响应 单 击 操作 ， 代 码 如 下 : 


01 export default class app extends Component ( 
02 77 BRC T VEG Pea I 
03 
04 render() { 
05 return ( 
06 «View style={styles.container}> 
07 ESYU SOUL UT 
08 «View style={styles.advertisement}> 
09 <ScrollView ref-"scrollView" 
10 horizontal={true} 
11 showsHorizontalScrollIndicator={ false} 
12 pagingEnabled={true}> 
13 <TouchableHighlight onPress={() => Alert.alert 
(" 你 单 击 了 轮 播 图 '，mnul1，mul1) }> 
14 <Text 
15 style={{ 
16 width: Dimensions.get ('window') .width, 
17 height: 180, 
18 backgroundColor: 'gray' 
19 }}> 广 告 1</Text> 
20 «/TouchableHighlight» 
21 // 这 里 省 略 了 和 上 面相 似 的 代码 
22 </ScrollView> 
23 </View> 
24 // 这 里 省 略 了 没有 修改 的 代码 
25 </View> 
26 ) 
27 } 
28 
29 // 这 里 省 略 了 没有 修改 的 代码 
30 
31 _renderRow = (rowData, sectionID, rowID) => { 
32 return ( 
33 <TouchableHighlight onPress={() => Alert.alert(' 你 单 击 了 商 
品 列表 '，nul1，nul1) }> 
34 «View style={styles.row}> 
35 «Text» (rowData)«/Text» 
36 </View> 
37 </TouchableHighlight> 
38 i 
39 } 
40 } 


E 


从 上 述 代码 中 可 以 看 出 : 把 想 要 添加 单 击 响应 的 组 件 放 到 TouchableHighlight 组 件 中 ， 就 可 以 为 其 添加 单 击 响应 ， 效 果 如 图 2.37 和 图 2.38 所 示 。 


你 点 击 了 轮 播 图 


OK 


你 点 击 了 商品 列表 


OK 


A238 ”商品 列表 的 单 击 响应 


3. 实现 状态 栏 


还 有 一 个 差点 被 遗忘 的 组 件 : 状态 栏 StatusBar。 上 面 的 例子 使 用 的 是 StatusBar 的 默认 配置 和 效果 ， 不 仅 如 此 ， 也 可 以 根据 自己 的 需求 来 配置 它 ， 代 码 如 下 : 


01 export default class app extends Component ( 
02 /7 CR ins T ét 


04 render() { 
05 return ( 
06 «View style={styles.container}> 
07 <StatusBar backgroundColor={'blue'} // 设置 背景 色 为 蓝 色 
08 barStyle={'default'} // 设置 默认 样式 
09 networkActivityIndicatorVisible={true} 
// 显示 正在 请 求 网 络 的 状态 


10 ></StatusBar> 

11 // 这 里 省 略 了 没有 修改 的 代码 
12 </View> 

13 ); 

14 i 


16 // 这 里 省 略 了 没有 修改 的 代码 


上 述 代码 将 StatusBar 的 背景 色 设置 成 了 蓝 色 、 样 式 设置 为 默认 ， 同 时 ， 让 状态 栏 显示 正在 进行 网 络 请 求 的 状态 。 运 行 Android App 的 效果 如 图 2.39 所 示 。 


背景 色 修改 成 功 ， 但 是 好 像 并 没有 显示 网 络 请 求 的 状态 ， 不 急 ， 再 运行 iOS App 看 看 ， 发 现 效果 也 有 一 些 不 同 : 背景 颜色 没有 生效 ， 如 图 2.40 所 示 。 


搜索 商品 


DE 
BU 


图 2.39 Android App 状态 栏 
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图 2.40 iOS App 状 态 栏 


为 什么 会 这 样 呢 ? 原来 ， 由 于 iOS 和 Android 平 台 状 态 栏 的 差异 性 ，React Native 的 StatusBar 组 件 的 部 分 属性 只 在 特定 平台 生效 。 
例如 ，statusBar 组 件 常用 属性 的 平台 兼容 性 如 下 。 

- animated 和 hidden 属 性 在 IOS、Android 平 台 都 有 效 。 

* backgroundColor 和 translucent 属 性 只 在 Android 平 台 有 效 。 

“barStyle、networkActivityIndicatorVisible 以 及 showHideTransition 属 性 只 在 iOS 平 台 有 效 。 


所 以 就 有 了 上 面 的 平台 差异 性 。 


24 .小结 


不 知 不 觉 中 ， 已 经 完成 了 电 商 类 应 用 首页 UI 的 全 部 内 容 ， 不 知道 读者 是 不 是 越 来 越 喜欢 React Native 开 发 了 呢 ? 


温 故 而 知 新 ， 在 开始 下 一 步 “ 征 程 ” 之 前 ， 先 来 简单 梳理 下 本 章 学 习 到 的 React Native 知 识 。 
“ 前 期 ， 我 们 进行 了 充分 的 准备 工作 : 了 解 了 Git 的 使 用 、JSX 语 法 、Flexbox 布 局 以 及 React Native 调 试 的 方法 。 


“ 然后 ， 重 新 设计 了 应 用 的 入 口 ， 让 iOS App 和 Android App 复 用 相同 的 组 件 app.js， 并 且 了 解 了 React Native 应 用 开发 的 一 般 流 程 。 


Ca: 这 里 分 享 给 读者 的 经 验 是 ， 先 搭 好 架子 是 一 个 良好 的 开发 习惯 。 


“ 接着 ， 设 计 并 实现 了 首页 的 布局 : 使 用 Flexbox 布 局 。 


最后， 按照 首页 结构 的 划分 依次 实现 了 各 个 组 件 ， 掌 握 了 一 些 React Native 常 用 组 件 (包括 View、Text、TextInput、Button、ScrollView、ListView、Alert、TouchableHighlight 以 及 StatusBar 等 ) 的 用 法 。 


当然 ， 读 者 不 会 满足 于 实现 如 此 简单 的 UI 效 果 ， 第 3 章 中 ， 一 起 来 进一步 完善 我 们 的 应 上 


E. 


第 2 篇 ”React Native 应 用 开发 实战 


第 3 章  React Native 的 组 件 (1) 
第 4 章 React Native 的 组 件 (2) 
第 5 章 ”原生 平台 的 适 配 和 调试 


$868: React Native 的 服务 器 端 处 理 


第 7 章 ”常用 React Native API 


第 3 章 React Native 的 组 件 (1) 


第 2 章 中 已 经 实现 了 电 商 应 用 的 首页 ， 虽 然 界面 和 功能 看 起 来 略 简陋 了 点 ， 但 是 麻雀 虽 小 ， 五 脏 俱全 ， 首 页 的 整体 布局 和 大 概 效果 已 经 完整 地 呈现 在 我 们 面前 了 。 接 下 来 ， 在 “夯实 的 地 基 ” 上 ， 我 们 将 
继续 “ 盖 楼 ”， 为 应 用 实现 更 多 的 功能 和 更 好 的 体验 。 


本 章 主 要 内 容 有 : 


- 移植 旧 的 App 项 目 。 

: 学 会 重 构 现 有 代码 。 

- 完善 第 2 章 中 的 搜索 框 。 

. 完善 第 2 章 中 的 轮 播 广 告 。 
: 完善 第 2 章 中 的 商品 列表 。 
- 实现 页 面 跳 转 。 


“ 实现 页 面 间 的 数据 传递 。 


3.1 创建 新 的 电 商 App 


mai 
d 


之 前 创建 了 一 个 简单 的 电 商 项 目 ， 本 节 来 实现 对 该 项 目的 


3.1.1 ”移植 旧 电 商 项 目 


(1) 先 创建 React Native 项 目 并 安装 依赖 包 。 


react-native init ch04 // 新 建 React NativeJj H cho4 
cd ch04 . 
npm install // 或 者 使 用 cnpm 安 装 ，cnpm install 


pavers : npm install 命 令 还 可 以 简写 成 npmi， 更 多 说 明 可 以 使 用 npm help install 查 看 帮助 文档 。 


(2) 将 第 2 章 ch03 项 目 中 的 index.ios.js、index.android.js 以 及 appjs 文 件 都 复制 到 ch04 文 件 夹 中 。 完 成 文件 复制 和 覆盖 之 后 ，ch04 项 目的 结构 如 图 3.1 所 示 。 


但 是 ， 如 果 这 时 候 直接 运行 App， 会 发 生 应 用 ch04 没 有 注册 的 错误 ， 如 图 3.2 所 示 。 


发 生 错 误 的 AppRegistry.registerComponent 函 数 在 第 1 章 的 例子 中 就 遇 到 过 ， 那 么 它 到 底 有 什么 作用 呢 ? 


Application chO4 has not been registered. 
This is either due to a require() error during 
initialization or failure to call 
AppRegistry.registerComponent. 


runApplication 
AppRegistrry. : 4 
. callFunction 


«unknown 


quard 


callFunctionReturnFlushedQueue 
MessageQueue. 15:107 


图 3.2 应 用 ch04 没 有 注册 的 错误 


原来 ，AppRegistry 是 所 有 React Native 应 用 的 入 口 
. 流程 如 图 3.3 所 示 。 


， 应 用 的 根 组 件 通过 AppRegistry.registerComponent 方 法 注册 自己 ， 然 后 原生 系统 才 可 以 加 载 React Native 应 用 的 代码 并 运行 React Native 应 


React Native 应 用 


istry.runApplication 
册 过 的 根 组 件 


图 3.3 AppRegistry.registerComponent 注 册 React Native 应 用 的 根 组 件 


(3) 了 解 AppRegistry 的 原理 之 后 ， 就 可 以 轻松 地 找到 错误 的 原 
具 生 成 的 原生 代码 运行 的 应 用 是 ch04， 产 生 错 误 的 代码 如 下 : 


，index.ios.js 和 index.android.js 文 件 中 注册 的 应 用 名 称 不 正确 ，React Native 应 用 中 注册 的 应 用 是 ch03， 而 react-native 命 令 行 工 


// index.ios.js 和 index.android.js 文 件 


AppRegistry.registerComponent('ch03', () => app); // React Native 注 册 ch03 
// ios 原 生 项 目 中 的 AppDelegate.m 文 件 
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 
moduleName :@"ch04" // 原生 代码 运行 ch04 


initialProperties:nil 
launchOptions:launchOptions]; 
// Pandroid 原 生 项 目 中 的 Mainactivity.java 文 件 
GOverride 
protected String getMainComponentName() { 
return "ch04"; 


// 原生 代码 运行 ch04 
} 


Baz: 这 里 是 我 们 第 一 次 接触 到 React Native 开 发 中 的 原生 代码 ， 通 常情 况 下 不 需要 修改 原生 代码 ， 只 要 简单 了 解 即 可 。 


(4) 将 React Native 代 码 中 注册 的 应 用 名 称 ch03 修 改 为 ch04 即 可 ， 修 改 index.ios.js 和 index.android.js 代 码 如 下 : 


01 AppRegistry.registerComponent('ch04', () => app); 


Cus. 由 于 iOS App 和 Android App 的 入 口 文件 不 同 ， 分 别 为 index.ios.js 和 indexandroid.js， 所 以 ch04 项 目 中 的 这 两 个 文件 都 需要 按照 上 述 代 码 进行 修改 。 


新 加 载 应 用 ， 效 果 如 图 3.4 所 示 。 
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商品 1 


商品 2 


商品 3 


Ra / 


图 3.4 注册 正确 的 应 用 名 称 后 的 运行 效果 


3.1.2” 重 构 现 有 的 代码 


在 成 功 移植 ch03 项 目的 实现 到 新 建 的 ch04 项 目 后 ， 我 们 就 可 以 开动 了 : 完善 应 用 。 但 是 ， 笔 者 在 实际 开发 过 程 中 总 结 的 经 验 是 ， 完 善 的 第 一 步 往往 是 从 梳理 和 重 构 现 有 代码 开始 ， 而 非 立 即 添加 新 代码 
或 功能 。 只 有 不 断 地 重 构 然后 添加 新 功能 ， 代 码 的 可 维护 性 才 会 越 好 ， 这 也 是 应 用 稳定 性 和 扩展 性 的 重要 保证 。 


IL 
GS 


中 | 


新 审视 appjs 文 件 的 代码 ， 从 中 不 难 发 现 这 样 的 问题 : ScrollView 组 件 下 所 有 子 组 件 的 样式 都 是 类 似 的 ， 导 致 很 多 元 余 代 码 。ScrollView 组 件 现 有 代码 如 下 : 


01 export default class app extends Component { 


E // 这 里 省 略 了 没有 修改 的 代码 

04 render() ( 

05 return ( 

06 «View style={styles.container}> 

07 // 这 里 省 略 了 没有 修改 的 代码 

08 «View style-(styles.advertisement]» 

09 <ScrollView ref-"scrollView" 

10 horizontal={true} 

11 showsHorizontalScrollIndicator={false} 

12 pagingEnabled={true}> 

13 <TouchableHighlight onPress={ () => Alert.alert 
(" 你 单 击 了 轮 播 图 '，mnul1，mul1) }> 

14 «Text style-(( 

15 width: Dimensions.get ('window') .width, 

16 height: 180, 

17 backgroundColor: 'gray' 

18 }}> 广 告 1</Text> 

19 «/TouchableHighlight» 

20 <TouchableHighlight onPress={() => Alert.alert 
(' 你 单 击 了 轮 播 图 '，null, nul11)}> 

21 «Text style={{ 

22 width: Dimensions.get ('window') .width, 

23 height: 180, 

24 backgroundColor: 'orange' 

25 } }> 广 告 2</Text> 

26 «/TouchableHighlight» 

27 <TouchableHighlight onPress={() => Alert.alert 
(" 你 单 击 了 轮 播 图 '，mnul1，mnul1) }> 

28 «Text style={{ 

29 width: Dimensions.get ('window') .width, 

30 height: 180, 

31 backgroundColor: 'yellow' 

32 } }> 广 告 3</Text> 

33 «/TouchableHighlight» 

34 «/ScrollView» 

35 «/Niew» 

36 // 这 里 省 略 了 没有 修改 的 代码 

37 </View> 

38 ) 7 

39 H 

40 

41 // 这 里 省 略 了 没有 修改 的 代码 

42 } 


如 果 想 更 新 轮 播 广告 的 高 度 的 话 ， 就 需要 修改 多 处 代码 heigh: 180。 因 此 ， 可 以 尝试 将 重复 的 样式 代码 抽 离 出 来 ， 代 码 效 果 如 下 : 


01 export default class app extends Component { 


02 // 这 里 省 略 了 没有 修改 的 代码 

04 render() ( 

05 return ( 

06 «View style={styles.container}> 

07 // 这 里 省 略 了 没有 修改 的 代码 

08 «View style-(styles.advertisement]» 

09 <ScrollView ref-"scrollView" 

10 horizontal={true} 

11 showsHorizontalScrollindicator={ false} 

12 pagingEnabled={true}> 

13 <TouchableHighlight onPress={() => Alert.alert 
(" 你 单 击 了 轮 播 图 '，mnul1，mul1) }> 

14 «Text style-([ 

15 styles.advertisementContent, { 

16 backgroundColor: 'gray' 

17 } 

18 ]}> 广 告 1</Text> 

19 «/TouchableHighlight» 

20 <TouchableHighlight onPress={() => Alert.alert 
(" 你 单 击 了 轮 播 图 '，mnul1，mnul1) }> 

21 «Text style-([ 

22 styles.advertisementContent, { 

23 backgroundColor: 'orange' 

24 } 

25 ] }> 广 告 2</Text> 

26 «/TouchableHighlight» 

27 <TouchableHighlight onPress-(() => Alert.alert 
(' 你 单 击 了 轮 播 图 '，null, null) }> 

28 <Text style={[ 

29 styles.advertisementContent, { 

30 backgroundColor: 'yellow' 

31 } 

32 ] }> 广 告 3</Text> 

33 </TouchableHighlight> 

34 </ScrollView> 

35 </View> 

36 // 这 里 省 略 了 没有 修改 的 代码 

37 «/Niew» 

38 dF 

39 } 

40 

41 // 这 里 省 略 了 没有 修改 的 代码 

40 } 

其 中 ， 添 加 的 样式 advertisementContent 定 义 如 下 : 

01 const styles = StyleSheet.create(( 

02 // 这 里 省 略 了 没有 修改 的 代码 

03 advertisementContent: ( 

04 width: Dimensions.get ('window') .width, 

05 height: 180 

06 


] 
07 // 这 里 省 略 了 没有 修改 的 代码 


08 n; 


这 样 ， 当 要 修改 轮 播 广告 页 面 的 高 度 时 ， 只 需要 修改 样式 advertisementContent 这 一 处 ， 所 有 广告 页 面 的 样式 都 可 以 同时 更 新 。 


虽然 ， 样 式 代 码 做 到 了 复 用 ， 但 是 TouchableHighlight 组 件 和 单 击 事件 等 还 是 重复 的 ， 对 此 ， 可 以 使 用 Javascript 数 组 的 map () 方法 来 做 进一步 优化 ， 修 改 app.js 代 码 如 下 : 


[n 


01 export default class app extends Component { 

02 constructor (props) { 

03 super (props); 

04 this.state = { 

05 advertisements: [ // 轮 播 广告 数组 

06 { // 数组 中 的 每 个 成 员 描述 了 广告 的 详细 信息 

07 title: "广告 1.， 

08 backgroundColor: 'gray' 

09 tr $ 

10 title: "广告 2 

Ji: backgroundColor: 'orange' 

12 ty { 

13 title: ' 广 告 3'， 

14 backgroundColor: 'yellow' 

15 } 

16 l 

17 i 

18 } 

19 

20 // 这 里 省 略 了 没有 修改 的 代码 

21 

22 render() ( 

23 return ( 

24 «View style={styles.container}> 

25 // 这 里 省 略 了 没有 修改 的 代码 

26 «View style={styles.advertisement}> 

27 <ScrollView ref-"scrollView" 

28 horizontal-(true] 

29 showsHorizontalScrollIndicator-(false] 

30 pagingEnabled={true}> 

31 {this.state.advertisements.map ( (advertisement, 

index) => { 

32 return ( 

33 <TouchableHighlight key={index} onPress= 
(Q => Alert.alert (Mii T 564818, null, 
null) }> 

34 «Text style-([ 

35 styles.advertisementContent, { 

36 backgroundColor: advertisement. 

backgroundColor 


37 } 

38 ]}>{advertisement.title}</Text> 
39 </TouchableHighlight> 
40 ) 7 

Al DE 

42 «/ScrollView» 

43 </View> 

44 // 这 里 省 略 了 没有 修改 的 代码 

45 </View> 

46 ) 7 

47 } 

48 

49 // 这 里 省 略 了 没有 修改 的 代码 

50 } 


Imi 


此 时 ， 如 果 想 要 修改 、 添 加 或 删除 广告 页 ， 对 于 重 构 后 的 代码 就 非常 简单 ， 只 需要 编辑 this.state.advertisements 数 组 即 可 。 重 新 加 载 应 用 ， 效 果 如 图 3.5 所 示 。 


商品 1 


商品 2 


商品 4 


商品 6 


图 3.5 ”代码 重 构 后 应 用 运行 效果 


3.2 ”完善 搜索 框 功能 一 一 TextInput 组 件 


重 构 代码 完毕 后 ， 就 可 以 “轻装 上 阵 ”， 更 快 更 好 地 为 应 用 添加 新 功能 了 。 按 照 之 前 首页 结构 的 划分 ， 先 来 看 看 搜索 框 。 搜 索 框 分 为 输入 框 和 搜索 按钮 两 部 分 ， 如 图 3.6 所 示 。 


输入 框 搜索 


搜索 框 


图 3.6 搜索 框 的 结构 


用 户 在 输入 框 输入 要 搜索 的 关键 字 后 ， 单 击 “ 搜 索 ” 按钮 ， 即 可 按照 输入 框 中 的 关键 字 进 行 搜索 。 


为 了 实现 这 样 的 效果 ， 可 以 使 用 Textlnput 组 件 的 onChangeText () 方法 。 当 输入 框 内 容 变化 时 会 调用 此 回调 函数 ， 改 变 后 的 文本 内 容 作 为 参数 传递 ， 然 后 使 用 


结果 。 修 改 appjs 代 码 如 下 : 


this.state.searchText 保 存 此 时 的 输入 


01 export default class app extends Component { 


constructor(props) ( 
super (props) ; 
this.state = { 
searchText: '', 
// 这 里 省 略 了 没有 修改 的 代码 
J; 
} 


// 这 里 省 略 了 没有 修改 的 代码 


render() ( 
return ( 
«View style={styles.container}> 
ESTO SOUL US 
«View style={styles.searchbar}> 
<Text Input style={styles.input} placeholder=' 搜 索 
商品 " 
onChangeText={ (text) => { 
this.setState({searchText: text}); 
}}></TextInput> 
«Button style={styles.button} title=' 搜 索 ' onPress= 
{() => { 
Alert .alert (' 搜 索 内 容 ' + this.state.searchText, 
null, null); 
}}></Button> 


</View> 
// 这 里 省 略 了 没有 修改 的 代码 
</View> 
); 
l 


// 这 里 省 略 了 没有 修改 的 代码 


// 保存 当前 输入 的 文本 


重新 加 载 应 用 ， 输 入 要 搜索 的 内 容 ， 例 如 Abc， 单 击 “ 搜 索 ” 按钮 ， 此 时 提示 框 将 显示 输入 框 刚才 输入 的 Abc， 效 果 如 


图 3.7 所 示 。 


搜索 内 容 Abc 


图 3.7 完善 搜索 框 的 功能 


出 


3.2.2 ”调试 搜索 结果 


除了 使 用 提示 框 查看 搜索 内 容 的 方法 之 外 ， 这 里 再 介绍 另 一 种 高 效 的 调试 方法 ， 即 使 用 console.log 将 日 志 打印 到 终端 控制 台 上 。 修 改 appjs 代 码 如 下 : 


01 export default class app extends Component { 
02 // 这 里 省 略 了 没有 修改 的 代码 
03 
04 render() { 
05 return ( 
06 «View style={styles.container}> 
07 77 a Hen T dpt eeu e 
08 «View style={styles.searchbar}> 
09 <Text Input style={styles.input} placeholder=' 搜 索 
nn J 
10 onChangeText={ (text) => { 
11 this.setState({searchText: text}); 
12 console.10g(' 输 入 的 内 容 是 ' + this.state. 
searchText); 
13 }}></TextInput> 
14 «Button style={styles.button} title=' 搜 索 ' onPress= 
{Q => í 
15 Alert.alert (' 搜 索 内容 ' + this.state.searchText, 
null, null); 
16 ))»«/Button» 
17 </View> 
18 // 这 里 省 略 了 没有 修改 的 代码 
19 </View> 
20 ) 7 
21 ] 
22 
23 // 这 里 省 略 了 没有 修改 的 代码 
24 } 


然后 打开 React Native 调 试 选项 中 的 Debug JS Remotely 选 项 ， 选 择 Chrome 浏 览 器 中 的 Console， 效 果 如 图 3.8 所 示 。 


React Native Debugger X 林 


C Q © localhost:8081/debugger-ui * o J 


React Native JS code runs inside this Chrome tab. 


Press ES to open Developer Tools. Enable Pause On Caught Exceptions for a 
better debugging experience. 


Status: Debugger session #10001 active. 


[x à] Elements Console Sources Network Timeline Profiles Application Security Audits : xX 
© w top v C Preserve log Show all messages 
输入 的 内 容 是 A app. js:67 
输入 的 内 容 是 Ab app. js:67 
输入 的 内 容 是 Abc app. js:67 


图 3.8 React Native 调 试 的 终端 控制 台 


此 时 ， 再 次 输入 搜索 内 容 ， 例 如 Abc， 在 终端 控制 台中 将 会 打印 出 详细 日 志 如 下 : 


实现 了 完整 的 搜索 功能 之 后 ， 接 下 来 再 美化 搜索 框 的 样式 。 


3.2.3 ”优化 搜索 框 样式 


现在 的 输入 框 是 直角 的 长 方形 ， 但 是 为 了 美观 ， 通 常 应 用 输入 框 的 边 角 都 是 带 有 一 定 弧度 的 ， 类 似 如 图 3.9 所 示 的 效果 。 


为 了 实现 圆 角 边 框 的 效果 ， 给 Textlnput 组 件 的 样式 添加 新 的 属性 borderWidth 和 borderRadius， 修 改 appjs 代 码 如 下 : 


01 const styles = StyleSheet.create(( 
02 // 这 里 省 略 了 没有 修改 的 代码 

04 input: ( 

05 flex: 1, 

06 borderColor: 'gray', 
07 borderWidth: 2, 

08 borderRadius: 10 

09 ] 

10 // 这 里 省 略 了 没有 修改 的 代码 


11 D; 


重新 加 载 应 用 后 ， 美 化 后 的 搜索 框 效果 如 图 3.10 所 示 。 


Carrier > 3:11 PM = 


Q Search or enter website name 


图 3.9 圆 角 边框 的 输入 杠 


Carrier 写生 


E310 圆 角 边框 的 输入 框 


3.3 “完善 轮 播 广 告 一 一 Image 组 件 


之 前 的 轮 播 广告 页 面 显 示 的 是 简单 的 文字 和 背景 色 ， 接 下 来 添加 一 些 好 看 的 


IR] 


片 作为 轮 播 广告 。 


网 


网 


React Native 中 


于 


片 显示 的 组 件 是 Image。lmage 组 件 可 以 显示 多 种 不 


3.3.1 ”使 用 网 络 图 片 


这 里 先 使 


网 络 | 


图 


片 来 看 看 Image 的 


法 和 效果 。 修 改 app.js 代 码 如 下 : 


同类 型 医 


H. & 


片 ， 包 括 网 络 | 


态 资 源 、 临 时 的 本 地 


片 ， 以 及 本 地 磁盘 上 的 


网 


片 (如 相册 ) 等 。 


01 export default class app extends Component { 

02 constructor (props) { 

super (props) ; 

this.state = { 

advertisements: [ 
{ // 数组 中 的 每 个 成 员 描述 了 网 络 图 片 

url: 
1399180862/217278/206073 


url: 


// 轮 播 广告 数组 


的 url 
'https://imgl13.360buyimg.com/cms/jfs/t4090/228/ 


fe/5874e621NC675c6d0. jpg" 


"https: //img13.360buyimg.com/cms/j£s/t3937/ 


164/1340098884/295670/ca0ebbaf/58703afbN5336c28d. jpg' 


url: 
189/5382195407/297118/37 


H 
} 


// 这 里 省 略 了 没有 修改 的 代码 


render() { 
return ( 
«View style={styles.container}> 


// 这 里 省 略 了 没有 修改 的 代码 


horizontal-(true 
showsHorizontalS 
pagingEnabled={t 
{this.state.adve 
index) => { 
return ( 


DE 
</ScrollView> 
</View> 
// 这 里 省 略 了 没有 修改 的 代码 
«/Niew» 
); 
l 


// 这 里 省 略 了 没有 修改 的 代码 


'https://imgl4.360buyimg.com/cms/jfs/t3190/ 


1637e/586£5b7bN9c81c29c. jpg" 


«View style={styles.advertisement}> 
<ScrollView ref-"scrollView" 


} 

crollIndicator-(false) 

rue)» 

rtisements.map( (advertisement, 


<TouchableHighlight key={index} onPress- 
{() => Alert.alert (' 你 单 击 了 轮 播 图 '，null, 
null)}> 
<Image style={styles.advertisement 
Content} 
source={ { 
uri: advertisement.url 
}}></Image> 
</TouchableHighlight> 


Ars: 当 使 用 新 的 模块 或 组 件 时 (例如 这 里 的 Image) 时 ， 首 先 必须 要 在 文件 头 导 入 该 模块 或 组 件 import{Image}from'react-native'; ， 否 则 会 发 生 无 法 找到 变量 Image 的 错误 。 


重新 加 载 应 


网 络 | 


网 


， 此 时 使 


片 的 轮 播 广告 效果 如 图 


3.11 所 示 。 
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3.3.2 ”使 用 本 地 图 片 


除了 使 用 网 络 | 
首先 ， 将 上 面 用 到 的 网 络 


所 示 。 


片 下 载 到 本 地 ， 


片 ， 还 可 以 将 图 片 资源 下 载 后 添加 到 ch04 项 目 中 ， 使 


E 


ham 


商品 5 


商品 7 


图 3.11 使 用 网 络 图 片 的 轮 播 广告 


本 地 图 片 。 
命名 为 advertisement-image-01jpg、advertisement-image-02jpg 以 及 advertisement-image-03.jpg， 然 后 复制 至 ch04 项 目 文件 夹 中 ， 效 果 如 图 3.12 


D 


Dabelrc 


DUCK( onfig 


flowconf ig 


gitattributes 


advertisement 


advertisement-image-02.|pqg 


in advertisement-image-O3.jpq 


FB app.js 
Im index.android.js 
Im index.ios.js 


然后 ， 修 改 代码 中 Image 引 


码 如 下 : 


312 ”下载 并 添加 图 片 到 ch04 项 目 


IR] 


网 络 图 片 是 设 


片 的 方式 ， 引 


属性 的 unrl 值 ， 而 引 


Image 组 件 source, 


本 地 图 片 可 以 直接 设置 Image 组 件 的 source 


属性 ， 


图 片 通过 require 方 式 加 载 ， 修 改 后 的 appjs 代 


export default class app extends Component { 
constructor (props) { 
super (props); 
this.state = { 
advertisements: [ 


{ 


// 轮 播 广告 数组 


image: require ('./advertisement-image-01.jpg') 


image: require('./advertisement-image-02.jpg') 


image: require ('./advertisement-image-03.jpg') 


H 
} 


// 这 里 省 略 了 没有 修改 的 代码 


render() ( 
return ( 
«View style={styles.container}> 
// 这 里 省 略 了 没有 修改 的 代码 
«View style={styles.advertisement}> 
<ScrollView ref-"scrollView" 
horizontal={true} 
showsHorizontalScrollindicator={ false} 
pagingEnabled={true}> 
{this.state.advertisements.map ( (advertisement, 
index) => { 
return ( 
<TouchableHighlight key={index} onPress= 
{0 => Alert.alert (' 你 单 击 了 轮 播 图 '，null, 
null)}> 
<Image style={styles.advertisement 
Content} 
source={advertisement.image}> 
</Image> 
</TouchableHighlight> 


DE 
«/ScrollView» 
«/Niew» 
// 这 里 省 略 了 没有 修改 的 代码 
</View> 
Ve 
} 


// 这 里 省 略 了 没有 修改 的 代码 


Baz: 引用 本 地 


录 下 的 advertisement-image-01.j 


go 


使 


本 地 图 片 的 效果 如 区 


3.13 所 示 。 


[ 


Carrier = . 


片 资源 时 ， 需 要 格外 注意 require 的 图 片 文件 路 径 ， 否 则 会 发 生 找 不 到 图 片 的 错误 。 以 上 述 代码 为 例 ，tequire ('./advertisement-image-01 jpg’) 引用 的 文件 路 径 是 指 ， 在 ch04 项 目 根 目 


商品 1 


商品 3 


商品 5 


商品 6 


商品 7 


图 3.13 ”使 用 本 地 图 片 的 轮 播 广告 


3.3.3. ”添加 指示 器 组 件 


给 轮 播 广告 换 上 了 漂亮 的 图 片 之 后 ， 还 差 一 个 效果 : 当前 页 面 指示 器 ， 效 果 如 图 3.14 所 示 。 


从 图 3.14 中 可 以 看 出 ， 指 示 器 由 圆 点 组 成 ， 圆 点 的 个 数 即 页 面 的 数量 ， 并 且 与 当前 页 面 序号 相同 的 圆 点 会 做 颜色 区 分 。 


图 3.14 页面 指示 器 


(1) 在 了 解 了 指示 器 的 原理 之 后 ， 首 先 定义 指示 器 中 国 点 的 尺寸 ， 修 改 appjs 代 码 如 下 : 


01 const circleSize = 8; 


02 const circleMargin = 5; 

03 

04 export default class app extends Component { 
05 // 这 里 省 略 了 没有 修改 的 代码 


(2) 在 render () 函数 中 的 轮 播 广告 中 添加 指示 器 组 件 ， 代 码 如 下 : 


01 export default class app extends Component { 

02 // 这 里 省 略 了 没有 修改 的 代码 

03 

04 render() { 

05 const _ advertisementCount = this.state.advertisements.length; 

// 指示 器 圆 点 个 数 

06 const indicatorWidth = circleSize * advertisementCount 十 

circleMargin * advertisementCount * 2; // 计算 指示 器 的 宽度 

07 const left = (Dimensions.get('window').width - indicatorWidth) 

/ 2; // 计算 指示 器 最 左边 的 坐标 位 置 

08 

09 return ( 

10 «View style={styles.container}> 

11 // 这 里 省 略 了 没有 修改 的 代码 

12 «View style-(styles.advertisement]» 

as <ScrollView ref="scrollView" 

14 horizontal={true} 

15 showsHorizontalScrollindicator={false} 

16 pagingEnabled={true}> 

17 {this.state.advertisements.map ( (advertisement, 

index) => { 

18 return ( 

19 <TouchableHighlight key={index} onPress= 
(Q => Alert.alert (Mii T 564818, null, 
null) }> 

20 <Image style={styles.advertisement 

Content} 

21 source={advertisement. image}> 

22 </Image> 

23 </TouchableHighlight> 

24 ) 7 

25 D) 

26 «/ScrollView» 

27 «View style-([ 

28 styles.indicator, ( 

29 left: left 

30 } 

3T ]}> 

32 {this.state.advertisements.map ( (advertisement, 

index) => { 

33 return (<View key={index} 

34 style={ (index === this.state.currentPage) 

35 ? styles.circleSelected 

36 : styles.circle}/>); 

37 Di 

38 «/Niew» 

39 «/Niew» 

40 // 这 里 省 略 了 没有 修改 的 代码 

41 </View> 

42 ye 

43 } 

44 

45 // 这 里 省 略 了 没有 修改 的 代码 

46 ji 


在 上 述 代 码 中 ， 首 先 通 过 指示 器 圆 点 的 个 数 计算 出 了 指示 器 的 宽度 ， 然 后 通过 屏幕 和 指示 器 的 宽度 ， 计 算出 了 指示 器 最 左边 的 坐标 位 


(3) 修改 样式 和 布 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


const styles = 


局 的 代码 如 


StyleSheet .create ({ 


// 这 里 省 略 了 没有 修改 的 代码 


indicat 


b 


circle: 


Öri f 

position: 'absolute', 
top: 160, 
flexDirection: 'row' 
{ 


width: circleSize, 
height: circleSize, 


11 borderRadius: circleSize / 2, 


12 backgroundColor: 'gray', 

T3 marginHorizontal: circleMargin 
14 tr 

15 circleSelected: { 

17 width: circleSize, 

18 height: circleSize, 

19 borderRadius: circleSize / 2, 

20 backgroundColor: 'white', 

21 marginHorizontal: circleMargin 
22 ] 

23 // 这 里 省 略 了 没有 修改 的 代码 

24 DE 


这 里 我 们 使 用 了 一 种 新 的 布局 方法 absolute， 即 绝对 布局 。 使 用 绝对 布局 时 ， 组 件 的 位 置 和 尺寸 必须 明确 定义 ， 例 如 上 述 代码 中 op、left、width 以 及 height。 由 于 绝对 布局 并 没有 flex 布 局 自 适应 屏 
幕 的 能 力 ， 所 以 在 实际 开发 中 ， 使 用 绝对 布局 组 件 的 以 上 属性 往往 是 通过 计算 动态 得 到 的 ， 例 如 上 述 代码 中 ， 指 示 器 的 宽度 和 最 左边 的 坐标 位 置 都 是 在 获取 屏幕 宽度 后 ， 计 算得 到 的 。 


Ca: 在 实际 开发 中 ， 如 果 使 用 绝对 布局 ， 千 万 不 要 将 位 置 和 尺寸 定义 为 固定 值 ， 否 则 将 无 法 支持 不 同 屏 幕 的 适 配 。 


(4) 添加 完 指示 器 并 配置 好 样式 后 ， 运 行 效果 如 图 3.15 所 示 。 
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商品 2 


商品 4 


图 3.15 有 指示 器 的 轮 播 广告 


TIT 
at 


后 ， 我 们 要 让 商品 列表 的 内 容 也 变 得 更 加 


于 ， 对 电 商 应 用 的 首页 的 改造 已 经 初 见 成 效 。 最 


在 完善 了 搜索 框 和 轮 播 广告 之 


片 文件 的 话 ， 根 目录 的 结构 会 变 得 越 来 越 “ 糟 糕 ”， 如 图 3.16 所 示 。 


中 ， 相 对 ch04 根 目录 的 文件 路 径 为 ./product-image-01jpg。 此 时 ， 如 果 不 断 地 添加 


图 片 放 至 专门 的 image 文 件 夹 中 。 重 构 之 后 ，ch04 项 目的 文件 结构 如 图 3.17 所 示 。 


添加 商品 图 片 到 ch04 项 


这 时 需要 对 图 片 资源 进行 一 次 重 构 ， 将 所 有 


ey di a 
LCNMANGCONT IO 


EB index.ios.js 


pg 


A316 根 目录 文件 越 来 越 多 的 ch04 项 目 
316 根 目录 


v lin. ch04 


> MARC 
> EB android 


advertiseme! 
advertisemer 
advertisemenr 


product-image 


.watchmanconfig 


图 3.17 重 构图 片 资 源 后 的 ch04 项 目 结构 


由 于 图 片 文件 的 路 径 发 生 了 变更 ， 所 以 还 需要 修改 引用 图 片 的 代码 如 下 : 


01 export default class app extends Component { 


02 constructor (props) { 

03 super (props) ; 

04 this.state = { 

05 advertisements: [ 

06 { 

07 image: require('./images/advertisement-image- 
01.5pg') 

08 ht 

09 image: require('./images/advertisement-image- 
02.5pg') 


11 image: require('./images/advertisement-image- 
03.jpg') 

14 B 

15 } 


17 // 这 里 省 略 了 没有 修改 的 代码 


3.4.2 ”重新 定义 商品 模型 


在 添加 好 商品 图 片 之 后 ， 第 一 步 就 是 要 修改 和 重新 定义 商品 模型 ， 修 改 appjs 代 码 如 下 。 


Dus. 在 实际 开发 中 ， 一 般 都 是 先 定义 数据 模型 ， 然 后 再 考虑 具体 功能 的 实现 。 


01 const ds = new ListView.DataSource(( // 创建 ListView.DataSource 数 据 源 

02 rowHasChanged: (rl, r2) => rl !== r2 

03 DE 

04 

05 export default class app extends Component ( 

06 constructor (props) { 

07 super (props) ; 

08 this.state = { 

09 dataSource: ds.cloneWithRows([ // 为 数据 源 传递 一 个 数组 

10 { 

11 image: require ('./images/advertisement-image-01.jpg'), 
12 title: "商品 1"， 

13 subTitle: ' 描 述 1' 

14 tr { 

15 image: require('./images/advertisement-image-01.jpg'), 
16 title: ' 商 品 2'， 

17 subTitle: ' 描 述 2' 

18 tr { 

19 // 这 里 省 略 了 重复 的 代码 

20 tr { 

21 image: require ('./images/advertisement-image-01.jpg'), 
22 title: ' 商 品 10'， 

23 subTitle: ' 描 述 10' 

24 } 

25 |, 

26 F 

27 } 

28 

29 // 这 里 省 略 了 没有 修改 的 代码 

30 } 


然后 ， 在 ListView 组 件 的 renderRow () 函数 中 添加 Image 组 件 ， 修 改 appjs 代 码 如 下 : 


01 export default class app extends Component { 
02 // 这 里 省 略 了 没有 修改 的 代码 


04 renderRow = (rowData, sectionID, rowID) => ( 
05 B return ( 
06 <TouchableHighlight onPress-(() => Rlert.alert(! 你 单 击 了 商 
品 列表 '，nul1，mnul1) }> 
07 «View style={styles.row}> 
08 <Image source={rowData. image} 
09 style={styles.productImage}> 
10 </Image> 
11 <Text style={styles.productTitle}>{rowData.title} 
</Text> 
12 <Text style={styles.productSubTitle}>{rowData.subTitle} 
</Text> 
13 </View> 
14 </TouchableHighlight> 


17 } 


19 const styles = StyleSheet.create ({ 

20 // 这 里 省 略 了 没有 修改 的 代码 

21 row: { 

22 height: 60, 

23 flexDirection: 'row', 

24 alignItems: 'center' 

25 Lh 

26 productImage: { 

27 marginLeft: 10, 

28 width: 40, 

29 height: 40 

30 ty 

31 productText: {}, // 这 里 暂时 未 用 到 ， 且 未 设置 样式 
32 productTitle: {}, // 这 里 暂 未 设置 样式 
33 productSubTitle: () // 这 里 暂 未 设置 样式 

34 DE 


此 时 ， 商 品 列表 的 运行 效果 如 图 3.18 所 示 。 
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图 3.18 添加 了 图 片 和 描述 的 商品 列表 


343 商品 布局 的 优化 


列表 的 雏形 实现 之 后 ， 就 可 以 在 此 基础 上 做 一 些 样式 和 布局 上 的 优化 了 。 优 化 的 目标 效果 如 


3.19 所 示 。 


[ 


图 3.19 商品 列表 行 结构 


按照 上 述 结构 ， 修 改组 件 代码 如 下 : 


01 export default class app extends Component ( 
02 // 这 里 省 略 了 没有 修改 的 代码 
03 
04 renderRow = (rowData, sectionID, rowID) => ( 
05 i return ( 
06 <TouchableHighlight onPress-(() => Alert.alert (' 你 单 击 了 商 
品 列表 '，null, null))» 
07 <View style={styles.row}> 
08 <Image source={rowData. image} 
09 style={styles.productImage}> 
10 </Image> 
11 <View style={styles.productText}> // flexDirection 
默认 为 "column" 
12 <Text style={styles.productTitle}>{rowData.title} 
</Text> 
13 «Text style={styles.productSubTitle}> 
14 {rowData.subTitle} 
15 </Text> 
16 </View> 
T7 «/Niew» 
18 «/TouchableHighlight» 
19 ) 7 
20 } 
21 
22 // 这 里 省 略 了 没有 修改 的 代码 
23 


网 


此 时 ， 应 用 的 运行 效果 如 


3.20 所 示 。 


完成 了 列表 的 基本 布局 之 后 ， 接 着 优化 样式 。 修 改 appjs 代 码 如 下 。 


Cus. 在 实际 开发 中 ， 先 搭 好 架子 再 优化 细节 是 一 个 良好 且 高 效 的 开发 习惯 。 


图 3.20 ”优化 后 的 商品 列表 


01 const styles = StyleSheet.create ({ 
02 // 这 里 省 略 了 没有 修改 的 代码 


03 row: { 


04 
05 
06 
07 
08 
09 
10 
A 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
21 
28 
29 


n; 


height: 60, 
flexDirection: 'row', 
backgroundColor: 'white' 


h 

productImage: { 
width: 40, 
height: 40, 
marginLeft: 10, 
marginRight: 10, 
alignSelf: 'center' 


ty 

productText: { 
flex: 1, 
marginTop: 10, 
marginBottom: 10 

h 

productTitle: ( 
flex: 3, 
fontSize: 16 

ty 

productSubTitle: { 
flex: 2, 
fontSize: 14, 
color: 'gray' 


优化 列表 样式 和 布局 后 的 效果 如 图 3.21 所 示 。 
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最 后 ， 为 列表 添加 分 割 线 。 幸 运 的 是 ，ListView 组 件 已 经 为 


发 者 提供 了 方法 ， 即 renderSeparator () 函数 ， 所 以 只 要 实现 该 函数 即 可 。 修 改 appjjs 代 码 如 下 : 


图 3.21 


优化 样式 和 布局 后 的 商品 列表 


01 export default class app extends Component { 


r // 这 里 省 略 了 没有 修改 的 代码 

04 render() ( 

o5 // 这 里 省 略 了 没有 修改 的 代码 

06 return ( 

07 «View style={styles.container}> 

08 // 这 里 省 略 了 没有 修改 的 代码 

09 «View style={styles.products}> 

10 <ListView dataSource={this.state.dataSource} 

11 renderRow={this. renderRow} 

12 renderSeparator={this . renderSeperator] /> 

// ERTER 

13 «/Niew» 

14 «/Niew» 

15 ig 

16 } 

17 

18 // 这 里 省 略 了 没有 修改 的 代码 

19 

20 _renderSeperator(sectionID, rowID, adjacentRowHighlighted) ( 

21 return ( 

22 «View key-(^$(sectionID]-$(rowID)]) style={styles.divider}> 
«/Niew» 

23 ); 

24 } 

25 } 

26 

27 const styles = StyleSheet.create(( 

28 // 这 里 省 略 了 没有 修改 的 代码 

29 divider: ( 

30 height: 1, 

31 width: Dimensions.get ('window').width - 5, 

32 marginLeft: 5, 

33, backgroundColor: 'lightgray' 

34 }, 

35 // 这 里 省 略 了 没有 修改 的 代码 

36 } 

重新 加 载 应 用 ， 添 加 分 割 线 的 商品 列表 效果 如 图 3.22 所 示 。 


Bit, 


图 3.22 添加 分 割 线 的 商品 列表 


电 商 App 的 首页 已 经 焕然 一 新 。 


3.5” 拖 岛 刷新 列表 一 一 RefreshControl 组 件 


在 3.4 节 中 ， 我 们 完善 了 商品 列表 的 功能 : 不 仅 优 化 了 列表 的 布局 ， 还 添加 了 分 割 线 等 效果 。 不 过 ,该 App 还 缺少 一 个 常用 的 功能 ， 那 就 是 拖 灸 刷新 。 


K, 但 是 


户 体验 却 没有 拖 昌 好 ， 而 且 ， 由 于 现在 移动 开发 设备 屏幕 通常 较 小 ， 额 外 添加 按钮 对 界面 设计 影响 也 较 大 。 


E 
里 


然 也 可 以 添加 一 个 “刷新 ”按钮 用 于 响应 用 户 请 


Dan: 用 户 体 验 (User Experience， 简 称 UX 或 UE) 是 涉及 一 个 人 使 用 一 个 特定 产品 或 系统 或 服务 的 有 关 行 为 、 态 度 与 情绪 。 用 户 体验 包括 实际 、 体 验 、 情 感 、 有 意义 、 有 价值 的 人 机 交流 ， 以 及 


产品 所 有 权 方 面 的 问题 。 此 外 还 包括 系统 方面 ， 例 如 实用 、 易 用 性 和 效率 。 


为 了 实现 拖 电 刷新 列表 的 效果 ， 需 一 个 新 的 React Native 组 件 : RefreshControl。RefreshControl 组 件 用 在 ScrollView 或 ListView 内 部 ， 为 其 添加 下 拉 刷 新 的 功能 。 


在 使 用 RefreshControl 组 件 之 前 ， 首 先 要 在 this.state 中 添加 一 个 是 否 正 在 刷新 中 的 标志 。 


(1) 修改 appjs 代 码 如 下 : 


01 export default class app extends Component { 
02 constructor (props) { 
03 super (props); 
04 this.state = { 
05 isRefreshing: false // 是 否 正在 刷新 中 的 标志 
06 n 
07 H 
08 
H // 这 里 省 略 了 没有 修改 的 代码 
} 


(2) 在 ListView 组 件 中 添加 RefreshControl。 修 改 ListView 相 关 代 码 如 下 : 


01 export default class app extends Component { 

02 // 这 里 省 略 了 没有 修改 的 代码 

04 render() ( 

05 // 这 里 省 略 了 没有 修改 的 代码 

06 

06 return ( 

07 «View style={styles.container}> 

08 // 这 里 省 略 了 没有 修改 的 代码 

09 «View style={styles.products}> 

10 <ListView dataSource={this.state.dataSource} 

HET renderRow-[this. renderRow] 

12 renderSeparator-[this. renderSeperator) 

13 refreshControl-(this . renderRefreshControl 07» 

14 «/Niew» 

15 «/Niew» 

16 ); 

17 } 

18 

19 // 这 里 省 略 了 没有 修改 的 代码 

20 _renderRefreshControl() { 

21 return ( 

22 <RefreshControl 

23 refreshing={this.state.isRefreshing} // 通过 this.state. 
isRefreshing 设 置 RefreshControl 是 否 正在 刷新 

24 tintColor={'#FF0000'} 

25 title={ IEZEMIR AGE, if ahttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/16424/OEBPS/Text/...'} 

26 titleColor={'#0000FF'}> T 

27 </RefreshControl> 

28 ) 7 

29 } 

30 } 


重新 记载 应 用 后 ， 下 拉 拖 外 列表 ， 可 以 看 到 添加 的 RefreshControl 效 果 如 图 3.23 所 示 。 
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图 3.23 ”添加 RefreshControl 的 商品 列表 


(3) 接着 , 需要 为 RefreshControl 添 加 状态 变化 的 逻辑 ， 修 改 appjs 代 码 如 下 : 
01 export default class app extends Component { 
02 // 这 里 省 略 了 没有 修改 的 代码 
03 
04 _renderRefreshControl() { 
05 return ( 
06 <RefreshControl 
07 refreshing-(this.state.isRefreshing) 
08 onRefresh-(this. onRefresh) // 刷新 时 调用 的 onRefresh () 方 法 
09 tintColor={'#FF0000'} 
10 title={ EEN MAGE, wWahttp: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/16424/OEBPS/Text/...'} 
11 titleColor={'#0000FF' }> 
12 </RefreshControl> 
13 dF 
14 } 
15, 
16 _onRefresh = () => { 
17 this.setState({isRefreshing: true}); // 设置 状态 为 正在 刷新 
18 
19 setTimeout(() => ( 
20 this.setState({isRefreshing: false});  // 设置 状态 为 结束 刷新 
21 }, 2000); // 定时 器 时 间 间 隔 2 秒 
22 } 
23 } 
这 时 重新 下 拉 拖 电 列表 然后 松 开 ， 列 表 就 处 于 刷新 状态 了 。 等 待 时 间 间 隔 2 秒 钟 后 ， 列 表 又 会 恢复 初始 状态 。 
另外 ， 需 要 提醒 读者 的 是 ， 与 StatusBar 组 件 类 似 ，RefreshControl 在 不 同 平台 下 的 效果 也 是 不 完全 相同 的 ， 例 如 ， 上 述 实 现在 Android 设 备 上 的 运行 效果 如 图 3.24 所 示 。 


图 3.24 RefreshControl 在 Android 上 的 效果 


(4) 在 完成 拖 息 刷新 的 响应 之 后 ， 还 可 以 进一步 完善 : 不 仅 只 是 等 待 2 秒 钟 ， 还 可 以 更 新 商品 数据 并 刷新 列表 。 修 改 app.js 代 码 如 下 : 


01 export default class app extends Component { 

// 这 里 省 略 了 没有 修改 的 代码 

04 onRefresh = () => { 

05 = this.setState([isRefreshing: true}); 

06 

07 setTimeout(() => ( 

08 const products = Array.from(new Array (10) ) .map ( (value, 
index) => (( 

09 image: require('./images/product-image-01l.jpg'), 

10 title: ' 新 商品 ' + index, 

11 subTitle: ' 新 商品 描述 ' + index 

12 D); 

13 this.setState({isRefreshing: false, dataSource: ds.clone 
WithRows (products) }); 

14 }, 2000); 

15; } 

16 } 

再 次 下 拉 拖 电 刷 新 列表 ， 等 待 时 间 间 隔 2 秒 后 ， 商 品 列表 也 更 新 了 ， 如 图 3.25 所 示 。 
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新 商品 4 
新 商品 5 


43.25 HRA BF A 


3.6 ”添加 页 面 跳 转 功能 一 一 Navigator 组 件 


React Native 实 现 页 面 跳 转 的 组 件 有 Navigator 以 及 NavigatorlOS， 和 前 面 介 绍 过 的 ViewPagerAndroid 问 题 一 样 ， 为 了 考虑 平台 兼容 性 和 代码 复 用 性 ， 这 里 使 用 同时 支持 iOS 和 Android 的 Navigator 
组 件 。 


在 正式 使 用 Navigator 之 前 ， 首 先 需要 对 现 有 的 ch04 项 目 做 一 些 简单 的 重 构 : 将 首页 的 实现 移植 到 新 建 的 ome.js 文 件 中 ， 以 便 后 面 的 逻辑 改动 。 


(1) 新 建 home,js 文 件 ， 将 appjjs 的 内 容 全 部 复制 至 homejjs 文 件 中 。 同 时 ， 不 要 忘记 修改 home,js 文 件 中 组 件 的 名 称 。 修 改 homejs 代 码 如 下 : 


01 export default class home extends Component { // 将 组 件 名 称 从 "app" 修 改 成 "rhome" 


(2) 修改 appjs 文 件 的 代码 如 下 : 


01 import React, (Component) from 'react'; 


02 import (View, Navigator) from 'react-native'; 

03 

04 import Home from './home'; 

05 

06 export default class app extends React.Component ( 

07 render() ( 

08 return ( 

09 «Navigator 

10 initialRoute={{ 

ula name: 'home', 

12 component: Home 

13 H} 

14 configureScene={ (route) => { 

15 return Navigator.SceneConfigs.FloatFromRight; 
16 1 

17 renderScene={ (route, navigator) => ( 
18 const Component = route.component; 
19 return «Component (http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16424/OEBPS/Text/...route.pare 
20 }}/> 

21 ) 7 

22 } 

23 } 


重新 加 载 应 用 ， 保 证 运行 效果 和 重 构 前 完全 一 致 ， 如 图 3.26 所 示 。 
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图 3.26 ”代码 重 构 后 的 运行 效果 


对 于 上 述 代 码 ， 读 者 可 能 会 有 很 多 疑惑 ， 这 里 来 一 一 说 明 。 


Navigator 组 件 的 initialRoute 属 性 定义 了 应 用 启动 时 加 载 的 路 由 (route) ， 而 路 由 是 Navigator 组 件 用 来 识别 泻 染 场景 的 一 个 对 象 ， 简 单 来 说 ，initialRoute 中 定义 的 组 件 就 是 应 用 第 一 个 要 显示 的 页 


面 ， 这 就 是 首页 homejjs。 


Navigator 组 件 的 configureScene 属 性 定义 了 页 面 之 间 跳 转 的 动画 ， 除 了 代码 中 的 Navigator.SceneConfigs.FloatFromRight; 外 ， 还 有 很 多 React Native 已 经 为 我 们 定义 好 的 动画 ， 包 括 : 


+ FloatFromRight; 


+ FloatFromLeft; 


+ FloatFromBottom; 


+ FloatFromBottomAndroid ; 


+ FadeAndroid; 


+ HorizontalSwipeJump ; 


+ HorizontalSwipeJumpFromRight; 


+ Vertical UpSwipeJump ; 


+ Vertical DownSwipeJump. 


Las 动画 效果 也 考虑 到 了 平台 差异 性 ， 这 点 可 以 从 动画 命名 可 以 看 出 ， 例 如 只 支持 Android 的 动画 有 FloatFromBottomAndroid 以 及 FadeAndroid 等 。 


Cus. 由 于 动画 效果 暂时 无 法 在 书 中 呈现 给 读者 ， 所 以 读者 感 兴趣 的 话 ， 可 以 自己 动手 运行 应 用 体验 不 同 的 动画 效果 。 


Navigator 组 件 的 renderScene () 函数 应 该 是 最 容易 令 人 困惑 的 地 方 了 ， 为 此 ， 可 以 使 用 React Native 调 试 来 一 看 究竟 。 在 该 函数 中 添加 断 点 并 重新 运行 应 用 ， 效 果 如 图 3.27 所 示 。 


Elements Console Security Audits 


(x 上 


Sources Network Timeline Profiles Application 


Sources » i | 四 appjs x Gl 
v © top @ Serving from the file system? Add your files into the workspace. more never show X 
v © localhost:8081 Zl import (View, Navigator} from 'react-native'; 


Bi debugger-ui 4 

>» © (no domain) 5 

v gË debuggerWorker.s : 
8 


import Home from './home'; 


export default class app extends React.Component { 


render() 
v © localhost:8081 LR. ( 
v By Users/yuanlin/(Des 9 «Navigator initialRoute-(( 
» í 10 name: 'home', 
lia images 11 component: Home 
> [iy node modules | 12 }} configureScene-((route) => { 
apps 13 return Navigator.SceneConfigs.FloatFromRight; 
im 14 )) renderScene-((route, navigator) => ( route = Object (name: "home", 
home.js | 15) const = route. 
index.ios.js = $i return «Component {...route.params} navigator={navigator}/> 
> 
debuggerWorkerj 18 ); 
index.ios.bundie?; 19 
: 20 } 
require-0.js 
require-214.js 


W 


3.27 使 用 调试 断 点 来 查看 renderScene 运 行 机 制 


这 里 需要 重点 关注 的 是 右 侧 调试 区 域 的 变量 值 ， 如 图 3.28 所 示 。 


im 


b A ot t we Q DL Async 
v Threads 
Main 
中 debuggerWorker.js 
v Watch 


paused 
+ è 
No Watch Expressions 


» Call Stack 


v Scope 
Y Local 
Component: undefined 
> navigator: Object 
v route: Object 
.navigatorRouteID: 0 
v component: home(props) 
null 
null 
length: 1 
name: "home" 
> prototype: ReactComponent 
>» proto : ReactComponent (props, contex 
[[FunctionLocation]]: home.js:28 
> [[Scopes]]: Scopes [3] 
name: "home" 
> proto : Object 
b this: Obiect 


arguments; 


caller: 


v Scope 
Y Local 
Component: undefined 
» navigator: Object 
v route: Object 
_ navigatorRouteID: 0 
v component: home(props) 
arguments: null 
caller: null 
length: 1 
name: "home" 
» prototype: ReactComponent 
> proto .: ReactComponent(props, conte» 
[[FunctionLocation]]: home. js:28 
» [[Scopes]]: Scopes [3] 
name: "home" 
> proto : Object 
» this: Object 


图 3.28  rendetScene RAK 05 4f. 


从 图 3.28 中 的 name 可 以 看 出 ， 此 时 的 route 里 的 name 和 component 就 是 在 initialRoute 属 性 中 传递 的 home 和 home 组 件 ， 所 以 app.js 文 件 中 这 行 代码 : 


01 return «Component (http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16424/OEBPS/Text/...route.params] navigator={navigator}/> 


的 作用 就 是 返回 home 组 件 。 当 然 ， 这 里 不 仅 返 回 了 home 组 件 ， 还 将 路 由 (route) 的 参数 以 及 navigator 参 数 也 传递 给 了 home 组 件 : iis (http;//www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16424/OEBPS/Text/...route.params} 以 及 navigator={navigator}， 于 是 ， 在 home 组 件 中 就 可 以 使 用 this.props.navigator 来 获取 navigator。 


37 ”二 级 页 面 的 跳 转 一 一 TouchableOparcity 组 件 


理解 了 Navigator 的 基本 用 法 之 后 ， 下 一 步 ， 添 加 一 个 新 的 组 件 ， 以 便 实 现 二 级 页 面 跳 转 的 效果 。 


(1) 添加 新 的 文件 detailjs， 并 在 该 文件 中 创建 detail 组 件 ， 代 码 如 下 : 


01 import React, (Component) from 'react'; 
02 import (StyleSheet, View, Text) from 'react-native'; 


04 export default class detail extends React.Component { 
05 render() ( 

06 return ( 

07 «View style={styles.container}> 
08 <Text style={styles.text}> 
09 详情 页 面 

10 </Text> 

Han </View> 

12 i 

13 i 

14 } 


16 const styles = StyleSheet.create ({ 

17 container: { 

18 flex: 1,backgroundColor: 'gray', 
19 justifyContent: 'center', 

20 alignItems: 'center' 


21 
22 
23 
24 
25 


fontSize: 20 


n; 


(2) 在 首页 中 修改 按钮 响应 ， 添 加 跳 转 到 下 一 个 页 面 的 入 口 。 修 改 homejs 中 _renderRow 的 代码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 


17 


18 
19 
20 
21 
22 
23 


export default class home extends React.Component { 


// 这 里 省 略 了 没有 修改 的 代码 


.renderRow = (rowData, sectionID, rowID) => { 
return ( 
<TouchableHighlight onPress-(() => ( 
const (navigator) = this.props; // 从 props 获 取 navigator 
if (navigator) ( 
navigator.push((name: 'detail', component: Detail}); 
} 
n> 
<View style={styles.row}> 
<Image source={rowData.image} 
style={styles.product Image}></Image> 
<View style={styles.productText}> 
<Text style={styles.productTitle}>{rowData.title} 
</Text> 
<Text style={styles.productSubTitle}>{rowData. 
subTitle}</Text> 
</View> 
</View> 
</TouchableHighlight> 


在 使 用 this.props.navigator 获 取 Navigator 之 后 ， 可 以 使 用 Navigator 的 如 下 接口 来 进行 场景 的 切换 。 


- push (route) : 跳 转 到 新 的 场景 ， 并 且 将 场景 入 栈 。 


‘pop: 跳 转 到 上 一 个 场景 ， 并 且 将 当前 场景 出 栈 。 


"pep 


* Pep: 


+ tepl 


+ repl 


+ repl 


ToRoute (route) : pop 到 路 由 指定 的 场景 ， 在 整个 路 由 栈 中 ， 处 于 指定 场景 之 后 的 场景 都 将 会 被 印 载 。 
ToTop () : pop 到 栈 中 的 第 一 个 场景 ， 却 载 其 他 的 所 有 场景 。 

ace (route) : 用 一 个 新 的 路 由 替换 掉 当 前 场景 。 

aceAtIndex (route, index) : 替换 指定 序号 的 路 由 场景 。 


acePrevious (route) : 替换 上 一 个 场景 。 


“ 其 他 方法 : jumpBack () . jumpForward () . jumpTo (route) 以 及 resetTo (route) 等 。 


此 时 有 


[四 


新 加 载 应 用 ， 然 后 单 击 商品 列表 ， 这 样 就 可 以 跳 转 到 下 一 个 页 面 了 ， 如 图 3.29 所 示 。 


图 3.29 ”二 级 详情 页 面 


(3) 那么 如 何 返 回 到 上 一 个 页 面 呢 ? 答案 就 是 使 用 Navigator 的 pop () 方法 。 修 改 detailjs 代 码 如 下 : 


01 import React, (Component) from 'react'; 
02 import (StyleSheet, View, Text, TouchableOpacity) from 'react-native'; 


04 export default class detail extends React.Component { 

05 render() { 

06 return ( 

07 «View style={styles.container}> 

08 <TouchableOpacity onPress-(this. pressBackButton.bind 
(this) }> 

09 «Text style={styles.back}> 返 回 </Text> 

10 </TouchableOpacity> 

11 <Text style={styles.text}> 

12 详情 页 面 

13 </Text> 

14 </View> 

15 i 

16 } 


18  pressBackButton() ( 

19 const {navigator} = this.props; 
20 if (navigator) ( 

21 navigator.pop(); 

22 } 


24 j 


26 const styles - StyleSheet.create(( 
27 ZETT T EA TECI 
28 back: { 

29 fontSize: 20, 

30 color: 'blue' 


32 DE 


为 了 实现 “返回 ”按钮 功能 ， 除 了 本 书 前 面 介绍 的 Button 和 TouchableHighlight 组 件 ， 这 里 使 用 了 一 个 类 似 TouchableHighlight 的 新 组 件 TouchableOpacity。TouchableOpacity 同 样 用 于 封装 组 
件 ， 使 其 可 以 正确 响应 触摸 操作 。 除 此 之 外 ，React Native 的 Touchable* 组 件 还 有 TouchableNativeFeedback 以 及 TouchableWithoutFeedback， 它 们 到 底 有 什么 区 别 呢 ? 


* TouchableHighlight: 单 击 该 组 件 后 ， 该 组 件 的 不 透明 度 会 降低 同时 会 看 到 相应 的 颜色 〈 视 图 变 暗 或 者 变 亮 ) 。 


+ TouchableOpacity: 单 击 该 组 件 后 ， 封 装 的 组 件 的 不 透明 度 会 降低 。 这 个 过 程 并 不 会 真正 改变 组 件 层级 ， 大 部 分 情况 下 很 容易 添加 到 应 用 中 而 不 会 带 来 副作用 。 


* TouchableNativeFeedback: 只 支持 Android 平 台 ， 在 Android 平 台 上 该 组 件 可 以 使 用 原生 平台 的 状 ; 显示 触摸 状态 变化 。 
* TouchableWithoutFeedback: 单 击 该 组 件 后 ， 该 组 件 没有 任何 反应 和 变化 ， 所 以 不 推荐 使 用 。 


此 时 ， 重 新 加 载 应 用 ， 然 后 单 击 图 3.30 中 的 “返回 ”按钮 可 以 返回 到 首页 了 。 


43.30 单 击 “ 返 回 ”按钮 返回 到 首页 


Dus. 更 多 页 面 间 的 跳 转 和 动画 内 容 限于 篇 幅 ， 这 里 不 再 一 一 详细 介绍 ， 感 兴趣 的 读者 可 以 自己 修改 代码 体验 效果 。 


3.8 

跳 转 和 返回 的 效果 实现 了 ， 那 么 ， 如 何 实现 页 面 间 的 数据 传递 和 通信 呢 ? 

其 实 ， 从 上 述 代码 中 读者 已 经 可 以 发 现 : React Native 使 用 props 来 实现 页 面 间 数 据 传递 和 通信 。 在 React Native 中 ， 有 两 种 方式 可 以 存储 和 传递 数据 ， 即 props (属性 ) 以 及 state (状态 ) ， 其 中 : 

“ props 通 常 是 在 父 组 件 中 指定 的 ， 而 且 一 经 指定 ， 在 被 指定 的 组 件 的 生命 周期 中 则 不 再 改变 。 

+ state 通 常 是 用 于 存储 需要 改变 的 数据 ， 并 且 当 state 数 据 发 生 更 新 时 ，React Native 会 刷新 界面 。 

了 解 了 props 与 state 的 区 别 之 后 ， 读 者 应 该 知道 ， 要 将 首页 的 数据 传递 到 下 一 个 页 面 ， 需 要 使 用 props。 所 以 修改 home.js 代 码 如 下 : 

01 export default class home extends React.Component { 

0 // 这 里 省 略 了 没有 修改 的 代码 

04 .renderRow = (rowData, sectionID, rowID) => ( 

05 return ( 

06 <TouchableHighlight onPress-(() => ( 

07 const (navigator) = this.props; // 从 props 获 取 navigator 

08 if (navigator) ( 

09 navigator .push ({ 

10 name: 'detail', 

11 component: Detail, 

12 params: { 

13 productTitle: rowData.title 

" // 通过 params 传 递 props 

} 

15 D; 

16 } 

17 }}> 

18 // 这 里 省 略 了 没有 修改 的 代码 

19 «/TouchableHighlight» 

20 ) 7 

21 } 

22 } 

在 homejs 中 ,为 Navigator 的 push () 方法 添加 的 参数 params， 会 当做 props 传 递 到 下 一 个 页 面 ， 因 此 ， 在 detailjs 中 可 以 使 用 this.props.productTitle 来 获得 首页 传递 的 数据 。 修 改 detailjs 代 码 如 
F: 


01 export default class detail extends React.Component { 

02 render () { 

03 return ( 

04 <View style={styles.container}> 

05 <TouchableOpacity onPress-(this. pressBackButton.bind 
(this) }> 

06 «Text style={styles.back}> 返 回 </Text> 

07 </TouchableOpacity> 

08 «Text style={styles.text}> 

09 {this.props.productTitle} 

10 </Text> 

11 </View> 

12 i 

13 } 


15 // 这 里 省 略 了 没有 修改 的 代码 


重新 加 载 应 用 ， 当 再 次 单 击 商品 列表 时 ， 详 情 页 面 将 显示 单 击 的 商品 名 称 ， 效 果 如 图 3.31 所 示 。 


图 3.31 详情 页 面 显 示 单 击 的 商品 名 称 


这 样 ， 一 个 完整 的 页 面 跳 转 和 页 面 间 数 据 传递 的 功能 就 实现 了 。 


3.9 小 结 


截止 本 章 ， 我 们 不 仅 开发 了 一 个 电 商 应 用 ， 还 对 已 有 的 应 用 进行 了 以 下 优化 


“ 代码 重 构 : 包括 组 件 的 复 有 用、 逻辑 的 简化 以 及 扩展 性 的 优化 。 
“样式 美化 : 自 定 制 了 组 件 的 样式 。 


“ 功能 完善 : 为 轮 播 广告 添加 指示 器 效果 ， 为 商品 列表 添加 图 片 和 详细 说 明 ， 为 应 用 添加 更 多 React Native 提 供 的 组 件 。 


本 书 通过 电 商 App 的 改造 ， 学 习 了 多 个 组 件 的 使 用 ， 并 带 入 了 实际 项 目 开发 中 的 一 些 技巧 ， 相 信 对 初学 者 的 学 习 有 更 好 的 指导 作用 。 


第 4 章 React Native 的 组 件 (2) 


应 用 的 功能 愈加 完善 ， 所 使 用 到 的 React Native 组 件 也 越 来 越 多 ， 截 止 到 目前 ， 我 们 使 用 的 组 件 已 经 有 : 


+ View; 

- Text; 

+ TextInput; 

+ Button; 

+ Scroll View ; 

+ ListView; 

+ Alert; 

* TouchableHighlight; 
+ StatusBar; 

+ RefreshControl ; 
* Image; 

* Navigator; 


* TouchableOpacity « 


不 过 ， 这 些 只 是 React Native 庞 大 组 件 库 的 “冰山 一 角 ”， 因 此 ， 本 章 来 学 习 更 多 的 组 件 使 用 情况 。 


本 章 主要 内 容 有 : 
' 介绍 更 多 React Native 自 带 的 组 件 。 


“ 学 会 使 用 第 三 方 组 件 。 


4.1 ”只 支持 特定 平台 的 组 件 


迄今 ， 我 们 使 用 的 都 是 通用 组 件 ， 即 同时 支持 iOS 和 Android 平 台 的 组 件 ， 而 还 有 一 类 组 件 是 我 们 避 而 不 谈 的 ， 那 就 是 特定 组 件 ， 它 们 只 支持 特定 的 平台 。 本 节 就 来 讲解 一 些 特定 组 件 。 
41.1 ”实现 多 页 面 分 页 TabBarlOS/ViewPagerAndroid 

只 支持 特定 平台 的 组 件 ， 例 如 以 下 两 种 。 

< 只 支持 iOS 的 组 件 : DatePickerIOS、DatePickerIOS、PickerIOS、ProgressViewIOS、SegmentedControlIOS 以 及 TabBarIOS 等 。 


- 只 支持 Android 的 组 件 : DrawerLayoutAndroid、ProgressBarAndroid、ToolbarAndroid 以 及 ViewPagerAndroid 等 。 


这 里 就 以 TabBarlOS 和 ViewPagerAndroid 为 例 ， 虽 然 它们 是 支持 不 同 平台 的 React Native 组 件 ， 但 是 实现 的 功能 是 类 似 的 ， 即 实现 多 页 面 分 页 的 效果 。 


由 于 不 同 平台 使 用 的 组 件 不 同 ， 这 里 首先 要 对 ch04 项 目的 代码 做 一 些 调整 。 


(1) 新 建 main.iosjs 和 main.android,js 两 个 文件 ，ch04 项 目 结构 如 图 4.1 所 示 。 


TOITIG.JS 


index.an 


| 


index. 


图 4.1 


(2) 给 这 两 个 文件 添加 如 下 代码 : 


ids React.Compoi 


1avigator-[(this. 


(3) 将 appjs 文 件 中 的 home 组 件 蔡 换 成 main 组 件 。 修 改 appjs 代 码 如 下 : 


重 构 后 的 ch04 项 目 结构 


| 
| 


01 import React, (Component) from 'react'; 


02 import (View, Navigator) from 'react-native'; 

03 

04 import Main from './main'; 

05 

06 export default class app extends React.Component ( 

07 render() ( 

08 return ( 

09 «Navigator 

10 initialRoute={ { 

10 name: 'main', 

11 component: Main 

12 n 

43. configureScene={ (route) => ( 

14 return Navigator.SceneConfigs.FloatFromRight; 

15 n 

16 renderScene={ (route, navigator) => ( 

16 const Component = route.component; 

17 return «Component (http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16424/OEBPS/Text/...route.pare 
{navigator}/> 

18 }}/> 

20 ) 7 

21 } 

22 } 


(4) 调整 过 后 ， 重 新 运行 应 用 ， 保 证 \OS App 和 Android App 运 行 仍然 正常 。 


读者 可 能 会 好 奇 ，main 组 件 的 文件 名 不 是 main.iosjs 和 main.androidjs 吗 ”React Native 项 目 怎么 还 能 正确 寻找 到 main 组 件 呢 ? 下 面 就 来 介绍 下 React Native 是 如 何 实现 平台 特定 代码 的 。 


对 于 main.iosjs 和 main.android.js 文 件 名 中 带 有 .ios 和 .android 这 样 平台 扩展 名 的 文件 ，React Native 会 自动 检测 某 个 文件 是 否 具有 .ios. 或 是 .android. 的 扩展 名 ， 然 后 根据 当前 运行 的 平台 加 载 正确 对 应 
的 文件 。 


例如 ，ch04 项 目 中 有 如 下 两 个 文件 : 


main.ios.js 
main.android.js 


这 样 命名 组 件 后 就 可 以 在 其 他 组 件 中 直接 引用 ， 而 无 须 关 心 当前 运行 的 平台 是 哪个 平台 。React Native 会 根据 运行 平台 的 不 同 引入 正确 对 应 的 组 件 。 


01 import Main from './main'; 


“ 在 iOS 平 台 上 : 上 述 代 码 引 用 的 是 main.ios.js 文 件 。 
“ 在 Android 平 台 上 : 上 述 代 码 引 用 的 是 main.android.js 文 件 


(5) 添加 一 个 新 的 “更 多 ” 页面， 新建 morejs 文 件 并 添加 代码 如 下 : 


01 import React, (Component) from 'react'; 

02 import (StyleSheet, View, Text) from 'react-native'; 
03 

04 export default class more extends React.Component { 
05 render() ( 

06 return ( 

07 «View style={styles.container}> 
08 <Text style={styles.text}> 
09 更 多 页 面 

10 </Text> 

11 </View> 

12 ); 

13 } 

14 } 

15 

16 const styles = StyleSheet.create ({ 

17 container: { 

18 flex: 1, 

19 justifyContent: 'center', 

20 alignItems: 'center' 

21 h 

22 text: { 

23 fontSize: 20 

24 } 

25 n; 


(6) AS "BS" 页面， 就 很 容易 添加 TabBarlOS 组 件 了 ， 修 改 main.ios.js 代 码 如 下 : 


01 import React, (Component) from 'react'; 
02 import (TabBarlOS) from 'react-native'; 
03 
04 import Home from './home'; 
05 import More from './more'; 
06 
07 export default class main extends React.Component { 
08 constructor (props) { 
09 super (props) ; 
10 this.state = ( 
11 selectedTab: 'home' 
12 } 
13 } 
14 
15 render() { 
16 return ( 
17 <TabBarIOS unselectedTintColor-"gray" // 未 选中 标签 的 颜色 
18 tintColor-"white" // 选中 的 标签 颜色 
19 barTintColor="orange"> // 标签 栏 的 背景 色 
20 «TabBarIOS.Item title=" 首 页 " 
21 icon={require('./images/icon-home.png')} // 图 标 
22 selected-(this.state.selectedTab === 'home'} 
23 onPress={() => { 
24 this.setState({selectedTab: 'home'}) ; 
25 ]» 
26 <Home navigator={this.props.navigator}></Home> 
27 </TabBarIOS .Item> 
28 <TabBarIOS .Item systemIcon-"more" // 使 用 React Native 
系统 图 标 
29 badge={2} // 提醒 的 数量 
30 selected-(this.state.selectedTab === 'more'} 
3 onPress-(() => { 
32 this.setState({selectedTab: 'more'}); 
33 }1}> 
34 <More navigator={this.props.navigator}></More> 
35 «/TabBarlOS.Item» 
36 «/TabBarlOS» 
34 ); 
38 } 


IR] 


(7) 在 运行 上 述 代 码 之 前 ， 不 要 忘记 在 ch04 项 目 中 添加 TabBarlOS.ltem 的 icon 所 使 用 的 


重新 加 载 应 用 ， 可 以 看 到 TabBarlOS 组 件 的 效果 如 图 4.2 所 示 。 
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图 4.2 TabBarlOS 28.4 


(8) 成 功 添加 TabBarIOS 组 件 后 ， 再 来 看 看 viewPagerAndroid 组 件 的 效果 。 修 改 main.android.js 代 码 如 下 : 


片 资源 ./images/icon-home.png。 


3:36 PM 


更 多 页 面 


01 import React, {Component} from 'react'; 

02 import (StyleSheet, View, Text, ViewPagerAndroid) from 'react-native'; 

03 

04 import Home from './home'; 

05 import More from './more; 

06 

07 export default class main extends React.Component ( 

08 render() ( 

09 return ( 

10 <ViewPagerAndroid style={styles.viewPager} initialPage={0}> 
11 <View style={styles.pageStyle}> 

12 <Home navigator={this.props.navigator}></Home> 
13 </View> 

14 <View style={styles.pageStyle}> 

15 <More navigator={this.props.navigator}></More> 
16 </View> 

17 </ViewPagerAndroid> 

18 ) 7 

19 H 

20 } 

21 

22 const styles = StyleSheet.create ({ 

23 viewPager: { 

24 flex: 1 

25 } 

26 }) 


D 


此 时 ，ViewPagerAndroid 的 效果 如 


4.3 所 示 。 


A! ta 3:48 


iPad mini 2 32G 179948 


iPhone 7 Plus 


Apple 
n EE 


图 4.3 ViewPagerAndroid 28 £f 


通过 上 述 TabBarlOS/ViewPagerAndroid 的 例子 ， 可 能 读者 会 有 这 样 的 感受 : React Native 开 发 首先 必须 要 考虑 平台 复 用 性 ， 但 是 在 一 些 情况 下 ， 针 对 不 同 平台 仍然 会 有 差异 性 的 实现 ， 在 保证 设计 和 
尽 


逻辑 


可 能 复 用 的 前 提 下 ，React Native 对 于 跨 平 台 的 开发 成 本 相对 于 原生 开发 来 说 还 是 比较 小 的 。 


4.1.2 ”加 载 指示 器 一 一 ActivityIndicator 


Activitylndicator 组 件 是 一 个 加 载 指示 器 ， 俗 称 “ 转 菊花 ”。 其 实 RefreshControl 组 件 中 就 包含 了 Activitylndicator (详情 可 参考 3.5 节 ) ， 这 里 单独 添加 Activitylndicator 看 一 下 效果 。 修 改 morejjs 代 
码 如 下 : 


01 export default class more extends React.Component ( 

02 render() ( 

03 return ( 

04 «View style={styles.container}> 

05 <ActivityIndicator color="purple" size="large"/> 
06 </View> 


重新 加 载 应 用 ，iOS App 运 行 效果 如 图 4.4 所 示 。 


这 里 需要 读者 注意 的 是 ，Activitylndicator 组 件 在 不 同 平台 的 表现 是 不 尽 相同 的 ， 例 如 Android App 的 效果 如 图 4.5 所 示 。 
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图 4.4 ”ActivityIndicator 在 iOS 平 台 的 效果 


图 4.5 ActivityIndicator 在 Android 平 台 的 效果 


Baz. 上 述 例 子 展示 的 都 是 组 件 基本 属性 的 用 法 ， 本 书 不 可 能 将 官方 文档 或 源 代码 中 所 有 的 属性 全 部 介绍 完 ， 所 以 在 了 解 基 本 属性 用 法 的 前 提 下 ， 读 者 想 要 实现 更 复杂 的 效果 ， 可 以 参考 官方 文档 
或 源 代码 。 


4.1.3” 地 图 一 一 MapView 


地 图 是 应 用 中 一 个 很 常用 的 功能 ，React Native 为 开发 者 提供 了 MapView 组 件 来 实现 地 


y 


功能 。 现 在 用 下 


的 例子 来 展示 MapView 的 使 用 。 修 改 morejjs 代 码 如 下 : 


Ej 


01 export default class more extends React.Component { 
02 constructor(props) { 

03 super (props) ; 

04 this.state = { 

05 isFirstLoad: true, 

06 mapRegion: undefined, 

07 mapRegionInput: undefined, 
08 annotations: [] 


10 } 


12 render() { 
i3 return ( 
14 <View style={styles.container}> 
15 <MapView style={styles.map} 
16 onRegionChange={this._onRegionChange} 
// 位 置 更 新 时 回调 
17 onRegionChangeComplete-(this. onRegionChangeComplete] 
18 region-(this.state.mapRegion]  // 设置 MapView 位 置 
19 annotations={this.state.annotations}/> 
20 </View> 
21 Jy 
22 } 


24  onRegionChange = (region) => { 
25 this.setState ({mapRegionInput: region]); 
26 } 


28  onRegionChangeComplete = (region) => { 

29 if (this.state.isFirstLoad) { 

30 this.setState ({mapRegionInput: region, 

31 annotations: this. getAnnotations (region), 
32 isFirstLoad: false]); 


34 } 


36 _getAnnotations = (region) => { 

37 return [ 

38 { 

39 longitude: region.longitude, 
40 latitude: ion. latitude, 
41 title: ' 你 的 位 置 ' 


H 


45 } 


StyleSheet .create ({ 
Ta T DEG ECL CHS 


50 width: Dimensions.get ('window') .width, 
51 height: Dimensions.get ('window') .height 


上 述 代 码 中 MapView 组 件 各 个 属性 的 作用 如 下 。 


+ region 属 性 用 来 设置 显示 的 地 图 区 域 。 
+ annotations 属 性 用 来 设置 大 头 针 的 位 置 。 


: onRegionChange 是 在 位 置 发 生 改 变 时 的 回调 ， 回 调 中 包含 了 最 新 的 位 置信 息 ， 用 于 更 新 地 图 。 


此 时 


， 可 以 看 到 MapView 的 效果 如 


T3 
& 
S 
ES 
E 
Ea 
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MapView is now deprecated and will be 
removed from React Native in version O.42.... 


图 4.6  MapView 组 件 


Dg. 使 用 地 图 服务 的 前 提 是 ， 打 开设 备 的 定位 服务 ， 并 且 允 许 引 用 使 用 设备 的 定位 服务 。 


但 是 这 里 却 出 现 一 个 警告 ， 查 看 警告 详情 可 以 发 现 ， 原 来 官方 会 在 React Native0.42 版 本 中 彻底 废弃 MapView， 所 以 ， 提 示 开 发 者 使 用 第 三 方 的 替代 方案 react-native- 


maps (https://github.com/airbnb/react-native-maps) 。 
Lus. 网 络 上 有 一 些 优 秀 的 第 三 方 组 件 或 替代 方案 ， 可 以 达到 更 好 的 效果 或 更 高 的 开发 效率 ， 甚 至 代替 React Native 组 件 ( 例 如 上 面 的 react-native-maps 就 取代 了 MapView 组 件 ) o 


4.1.4. igi ——Picker 


Picker 组 件 可 以 在 iOS 和 Android 平 台 上 泻 染 原生 的 选择 器 (Picker) 。 下 | 


回 


还 是 来 做 一 个 演示 ， 修 改 morejs 代 码 如 下 : 


01 export default class more extends React.Component ( 
02 constructor (props) { 

03 super (props) ; 

04 this.state = { 

05 language: 'java' 

06 H 

07 H 


09 render() ( 

10 return ( 

11 «View style={styles.container}> 

12 <Picker 

13 style={styles.picker} 

14 selectedValue={this.state. language} 

15 onValueChange={ (lang) => this.setState ((language: 
lang}) }> 

16 <Picker.Item label="Java" value="java"/> 

17 <Picker.Item label="JavaScript" value="javascript"/> 

18 </Picker> 

19 </View> 


22 } 


24 const styles = StyleSheet.create ({ 
25 // 这 里 省 略 了 没有 修改 的 代码 
26 picker: ( 

27 width: 200, 

28 height: 200 


Picker 组 件 在 iOS 和 Android 平 台 上 的 效果 如 图 4.7 所 示 。 
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图 4.7 iOS 和 Android 平 台 上 的 Picker 效 果 


4.1.5 选择 范围 一 一 Slider 


Slider 是 一 个 上 


于 选择 范围 的 组 件 ， 用 法 比较 简单 。 修 改 morejs 代 码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 


18 
19 


20 
21 
22 
23 
24 


export default class more extends React.Component ( 
constructor (props) { 
super (props) ; 
this.state = ( 
sliderValue: 5 
} 
} 


render() { 
return ( 
<View style={styles.container}> 
«Slider minimumValue={0} // 最 小 值 

style={{ width: 200 }} 

step-(1) // 步 长 ,在 minimumValue 和 maximumValue 之 间 
maximumTrackTintColor-'red' // Slider 滑 道 右 侧 的 颜色 
minimumTrackTintColor-'blue' // Slider 滑 道 左 侧 的 颜色 
maximumValue={10} // 最 大 值 


value={this.state.sliderValue } 
// Slider 滑 块 的 初始 位 置 
onValueChange={ (value) => this.setState({sliderValue: 
value}) }/> 
<Text>Sliderffi: {this.state.sliderValue}</Text> 
</View> 


通过 slider 组 件 的 onValueChange () 方法 就 可 以 接收 Slider 涓 动 位 置 改 变 的 消息 ， 效 果 如 图 4.8 所 示 。 


需要 提醒 读者 的 是 ，Slider 组 件 的 有 些 属性 也 是 只 支持 特定 平台 的 ， 例 如 minimumTrackTintColor 和 maximumTrackTintColor 属 性 只 支持 iOS 平 台 ， 所 以 在 Android App 中 这 两 个 


如 图 


4.9 所 示 。 
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Slider 值 : 5 


属性 没有 生效 ， 效 果 


图 4.8 iOS 平 台 的 Slider 组 件 


图 4.9 Android 平台 的 Slider 组 件 


4.1.6 ”开关 组 件 —Switch 


Switch 是 用 来 进行 两 个 状态 切换 的 组 件 ， 俗 称 开关 组 件 ，Switch 组 件 的 用 法 也 比较 简单 。 但 是 有 一 点 需要 提醒 读者 的 是 : 必须 使 用 onValueChange () 回调 来 更 新 Value 属性 以 响应 用 户 的 操作 。 如 果 
不 更 新 value 属 性 ，Switch 组 件 只 会 按 一 开始 给 定 的 value 值 来 渲染 上 且 保 持 不 变 ， 看 上 去 就 像 完全 点 不 动 的 效果 。 


通过 下 面 的 代码 来 看 看 Switch 的 具体 用 法 : 


01 export default class more extends React.Component { 
02 constructor (props) { 

03 super (props) ; 

04 this.state = { 

05 isOn: false 

06 } 

07 } 


09 render() ( 

10 return ( 

Xl «View style={styles.container}> 

12 «Switch onTintColor-'blue' // 开启 if 

13 thumbTintColor-'green' // 按钮 的 
14 tintColor-'black' // RANE 
15 onValueChange={() => this.setState(( 

16 isOn: !this.state.isOn 

17 PE // 当 状 态 值 发 生变 化 值 回调 
18 value={this.state.isOn === true} // 默认 状态 

19 /? 

20 </View> 


Switch 组 件 的 运行 效果 如 


四 


4.10 所 示 。 
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4.1.7 ”打开 网 页 一 一 WebView 


图 4.10 Switch 组 件 


WebView 组 件 就 像 一 个 简单 的 手机 浏览 器 ， 可 以 用 来 打开 网 页 。 例 如 ， 使 用 WebView 打 开 网 络 地 址 https://sina.cn，morejs 代 码 实现 如 下 : 


01 export default class more extends React.Component { 


02 render() { 
03 return ( 


04 «View style={styles.container}> 


08 «/Niew» 


10 } 
1T j 


13 const styles = StyleSheet.create 
14 // 这 里 省 略 了 没有 修改 的 代码 
15. web: ( 

16 width: 200, 

T7 height: 200 

18 } 


<WebView source={{ 


uri: 'https://sina.cn/' 
}} style={styles.web}></WebView> 


({ 


重新 加 载 应 用 后 ， 效 果 如 图 4.11 所 示 。 
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图 4.11 WebView 组 件 


42 第 三 方 组 件 


React Native 提 供 了 大 量 的 原生 组 件 ， 但 是 为 了 进一步 提升 开发 质量 和 效率 ， 也 可 以 使 用 第 三 方 组 件 ， 例 如 ，React Native 推 荐 使 用 react-native-maps (https://github.com/airbnb/react-native- 
maps) 来 代 蔡 原 生 组 件 MapView。 


那么 如 何 找到 这 些 优秀 的 第 三 方 组 件 呢 ?这 里 推荐 两 个 网 站 如 下 。 
- GitHub (https://github.com/) : 不 仅 包含 React Native 资 源 ， 还 有 大 量 其 他 平台 开发 用 到 的 第 三 方 组 件 和 开源 项 目 。 
- JS.COACH (https://js.coach/react-native) : 主要 是 JavaScript 资 源 ， 包 含 了 React Native. 


对 于 本 书 的 电 商 App 已 经 开发 的 功能 ， 又 有 哪些 优秀 的 第 三 方 组 件 可 以 替换 呢 ? 
Lax 在 开始 使 用 第 三 方 组 件 之 前 ， 这 里 先 将 ch04 项 目 已 有 代码 使 用 git 进 行 版 本 控制 ， 供 本 书后 面 的 章节 使 用 ， 具 体 方法 可 以 使 用 git tag 命 令 ， 即 git tag ch04-without-third-party-library o 
4.2.1 react-native-swiper 的 使 用 


对 于 轮 播 广告 ， 除 了 使 用 React Native 自 带 的 ScrollView 组 件 之 外 ， 就 有 一 个 优秀 的 第 三 方 蔡 代 方案 react-native-swiper (https://github.com/leecade/react-native-swiper) 。 


(1) 将 react-native-swiper 添 加 到 ch04 项 目 中 ， 安 装 的 命令 如 下 : 


npm install react-native-swiper --save 


(2) 使 用 react-native-swiper 来 替代 原 有 基于 ScrollView 组 件 的 轮 播 广告 实现 。 修 改 home.js 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 import Swiper from 'react-native-swiper'; 

03 

04 export default class home extends React.Component { 

i // 这 里 省 略 了 没有 修改 的 代码 

07 render() { 

08 return ( 

09 «View style={styles.container}> 

10 ESYU SOUL UT 

11 «View style={styles.advertisement}> 

12 XSwiper loop={true} height-(190) autoplay={true}> 

13 {this.state.advertisements .map ( (advertisement, 
index) => { 

14 return ( 

15 <TouchableHighlight key={index} 


16 onPress-(() => 


17 Alert.alert (' 你 单 击 了 轮 播 图 '，null, 
null) }> 
18 <Image style={styles.advertisement 
Content } 
19 source={advertisement.image}> 
20 </Image> 
21 </TouchableHighlight> 


23 n) 

24 </Swiper> 

25 </View> 

26 // 这 里 省 略 了 没有 修改 的 代码 
27 </View> 


(3) 重新 加 载 应 用 ， 此 时 使 用 react-native-swiper 实 现 的 轮 播 广告 ， 效 果 如 图 4.12 所 示 。 


不 过 稍 等 片刻 (大约 2 秒 钟 ) ， 应 用 却 出 现 了 错误 ， 如 图 4.13 所 示 。 
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图 4.12 使 用 react-native-swiper 实 现 的 轮 播 广告 
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图 4.13 ”替代 ScrollView 后 的 错误 


此 ， 要 将 home.js 文 件 中 


react-native-swiper 实 现 轮 播 效果 时 ， 不 需要 再 创建 定时 器 来 操作 ScrollView， 只 需要 做 简单 的 配置 ("loop-(trueJautoplay-(true)") 就 可 以 达到 效果 


原来 ， 当 使 
_startTimer 的 相关 代码 全 部 删除 。 


o/) 是 一 个 优秀 的 React Native 组 件 库 ， 它 同时 被 微软 和 Awesome React Native 推 荐 ， 详 见 https://github.com/GeekyAnts/NativeBase。 当 然 ， 在 读者 使 用 过 后 
完全 是 一 种 要 蔡 代 React Native 原 生 UI 组 件 的 姿态 。 既 然 NativeBase 这 么 强大 ， 我 们 就 赶快 来 体验 一 下 吧 。 


NativeBase (http://native 
或 许 会 发 现 ， 这 哪里 仅仅 是 一 个 第 三 方 组 件 ， 


(1) 首先 要 将 NativeBase 添 加 到 ch04 项 目 中 ， 安 装 的 命令 如 下 : 


npm install native-base --save 


(2) 安装 成 功 后 ， 打 开 package.json 文 件 ， 发 现 其 中 多 了 一 条 关于 NativeBase 的 描述 如 下 : 


"native-base": "^0.5.20", 


Les: package.json React Native 工 程 描述 文件 ， 该 文件 完整 描述 了 React Native 项 目的 信息 和 依赖 。 


(3) 由 于 NativeBase 依 赖 于 react-native-vector-icons， 所 以 还 需要 使 用 如 下 命令 安装 : 


npm install react-native-vector-icons -- 
react-native link react-native-vector-icons s // 添加 依赖 react-native-vector- icons 到 原生 工程 


Qus 意 : 有 时 候 在 安装 完 新 的 第 三 方 包 后 ， 会 出 现 如 图 4.14 所 示 的 错误 ， 此 时 解决 办 法 是 先 停止 React Native 服 务 ， 然 后 再 删除 node_modules 文 件 夹 ， 接 着 使 用 npm install 命 令 重新 安装 所 有 的 依赖 库 


最 后 重新 运行 React Native 服 务 和 应 用 。 


Unable to resolve module native-base from | 


Users/yuanlin/Desktop/learnreactnative/ 
code/ch04/detail.js: Module does not exist in 


code/chO4/node modules 


This might be related to https://github.com/ 
facebook/react-native/issues/4968 
To resolve try the following: 

1. Clear watchman watches: ‘watchman 
watch-del-all . 

2. Delete the node modules folder: rm -rf 
node modules && npm install’. 

3. Reset packager cache: rm -fr STMPDIR/ 
react-* or npm start -- --reset-cache `. 


RCTFatal 


-[RCTBatchedBridge stopLoadingWithError: 
| 


. 25-[RCTBatchedBridge start] block invo 
Ke 2 


dispatch call block and release 


dispatch client callout 


图 4.14 ”安装 新 的 第 三 方 包 后 发 生 的 错误 


下 面 就 可 以 将 原 有 的 实现 蔡 换 成 NativeBase 的 相应 组 件 了 ， 这 里 以 首页 为 例 。 


1. 首页 的 布局 


按照 NativeBase 的 Header 和 Content 布 局 方式 调整 首页 的 布局 结构 : NativeBase 的 所 有 组 件 都 是 放 在 Container 组 件 中 的 ， 其 中 ，Header 是 导航 栏 组 件 ，Content 组 件 用 于 实现 页 面 正文 。 修 改 
homejs 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 import (Container, Header, Content) from 'native-base'; 


04 export default class home extends Component { 


05 // 这 里 省 略 了 没有 修改 的 代码 


07 render() ( 

08 return ( 

09 «Container» 

10 «Header» 

11 <View style={styles.searchbar}> 

12 // Ame TIEA EIRT 
13 </View> 

14 </Header> 

15 <Content> 

16 <View aera {styles.advertisement }> 
17 / 这 里 省 略 了 没有 修改 的 代码 
18 «/Niew» 

19 «View SEIS {styles .products}> 

20 / 这 里 省 略 了 没有 修改 的 代码 
21 </View> 

22 </Content> 

23 </Container> 


Baz: 在 删除 组 件 的 同时 ， 不 要 忘记 删除 相应 的 样式 和 布局 代码 。 


重新 加 载 应 用 后 ， 基 于 NativeBase 布 局 结构 的 应 用 运行 效果 如 图 4.15 所 示 。 
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图 4.15 ”使 用 NativeBase 布 局 结构 的 应 用 运行 效果 


2. 搜索 框 的 样式 


这 时 读者 可 能 会 发 现 : 搜索 框 的 样式 有 些 问题 。 原 来 ，NativeBase 提 供 了 一 套 组 件 ， 这 套 组 件 的 功能 和 样式 是 经 过 测试 验证 的 ， 但 是 NativeBase 组 件 与 其 他 组 件 的 兼容 性 需要 调整 ， 为 了 解决 上 述 问 
最 高 效 的 办 法 就 是 使 用 NativeBase 组 件 来 实现 搜索 框 ， 而 非 自己 定义 组 件 和 布局 。 想 要 使 用 NativeBase 实 现 搜 索 框 功能 ， 只 需要 为 Header 组 件 添加 searchBar 属 性 即 可 。 修 改 homejs 代 码 如 下 。 


TA 如 果 读者 刚 开 始 对 NativeBase 不 熟悉 的 话 ， 可 以 先 阅读 NativeBase 的 官方 文档 (http:/ /nativebase.io/docs/v0.5.13/) 来 了 解 NativeBase 组 件 的 基本 用 法 。 


01 // 这 里 省 略 了 没有 修改 的 代码 
02 import (Container, Header, Content, Button, InputGroup, Icon, Input] 
from 'native-base'; 


04 export default class home extends Component { 
05 // 这 里 省 略 了 没有 修改 的 代码 


07 render() ( 
08 return ( 
09 «Container» 
10 «Header searchBar rounded» // Header 的 配置 : searchBar， 
rounded 

11 <InputGroup> 
12 <Icon name= 'ios-search-outline'/> 

// 基于 react-native-vector-icons 的 图 标 资源 


13 <Input 

14 placeholder=' 搜 索 商 品 ' 

15 onChangeText-( (text) => { 

16 this.setState({searchText: text}); 

17 console.log (!' 输 入 的 内 容 是 ' + this.state. 

searchText); 

18 }}/> 

19 </InputGroup> 

20 <Button 

21 transparent 

22 onPress={ () => { 

23 Alert .alert (' 搜 索 内 容 ' + this.state.searchText, 
null, null); 

24 }}> 

25 搜索 

26 </Button> 

27 </Header> 

28 // 这 里 省 略 了 没有 修改 的 代码 


29 </Container> 


Cus. 上 述 代码 中 使 用 的 Button 组 件 是 NativeBase 中 的 Button 组 件 ，React Native 也 有 Button 组 件 ， 所 以 在 引入 NativeBase 中 的 Button 组 件 时 ， 需 要 删除 React Native 的 Button 组 件 ， 以 避免 命名 冲突 。 


重 载 加 载 应 用 单 击 商品 列表 后 ， 效 果 如 图 4.16 所 示 。 
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图 4.16 使 用 NativeBase 实 现 的 搜索 框 
使 用 NativeBase 实 现 搜索 框 ， 无 须 配置 任何 样式 ， 但 是 显示 的 效果 却 如 此 好 看 ! 这 就 是 使 用 NativeBase 的 强大 之 处 : 用 更 简单 的 代码 达到 更 好 的 效果 。NativeBase 组 件 已 经 实现 了 很 多 配置 ， 开 发 者 
可 以 根据 需求 添加 属性 即 可 。 例 如 ， 使 用 searchBar 和 rounded 实 现 导航 栏 的 搜索 框 效果 。 
另外 ，NativeBase 使 用 的 图 标 资源 是 基于 react-native-vector-icons (https://github.com/oblador/react-native-vector-icons) 项 目的 ， 所 以 Icon 组 件 使 用 资源 只 需要 声明 图 标 名 称 即 可 : 


namec'ios-search-outline', 


Cus. 想 要 查询 更 多 react-native-vector-icon 项 目 可 用 的 图 标 和 名 称 ， 可 以 通过 该 项 目 源 代码 或 运行 Demo 例 子 查询 。 


3. 商品 列表 


NativeBase 提 供 了 一 系列 的 组 件 


IR] 


于 实现 列表 以 及 列表 中 


片 文字 的 显示 ， 包 括 List、Listltem、Thumbnail 以 及 Text。 修 改 homejjs 代 码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 


export default class home extends Component { 


// 这 里 省 略 了 没有 修改 的 代码 


render() ( 
return ( 
«Container» 
XHeader searchBar rounded» 
// 这 里 省 略 了 没有 修改 的 代码 
</Header> 
<Content> 


<Swiper loop={true} height={190} autoplay={true}> 


// 这 里 省 略 了 没有 修改 的 代码 


</Swiper> 
<List> 
<ListItem> 
<Thumbnail 


square size={40} 
source={ require ('./images/product- 
image-01.jpg') }/> 
<Text> 商 品 1</Text> 
<Text note> 描 述 1</Text> 


</ListItem> 
</List> 
</Content> 
</Container> 


} 


const styles = StyleSheet.create ({ 
advertisementContent: { 
width: Dimensions.get ('window') .width, 
height: 180 


// 删除 不 用 的 组 件 样式 


重新 加 载 应 


， 效 果 如 图 4.17 所 示 。 
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图 4.17 使 用 NativeBase 实 现 的 商品 列表 


同样 ， 代 码 中 没有 做 任何 复杂 的 样式 和 布局 的 配置 ， 就 实现 了 类 似 之 前 商品 列表 的 效果 ， 而 且 还 自动 添加 了 分 割 线 效果 ! 
4. 数据 和 响应 


添加 List 的 数据 源 和 单 击 响应 。 修 改 homejs 代 码 如 下 : 


01 export default class home extends Component ( 

02 constructor(props) ( 

03 super (props); 

04 this.state = { 

05 products: [ 

06 

07 image: require('./images/advertisement-image-01.jpg'), 
08 title: ' 商 品 1'， 

09 subTitle: ' 描 述 1' 

10 rf 

1l image: require('./images/advertisement-image-01.jpg'), 
12 title: "商品 21 

13 subTitle: ' 描 述 2' 

14 rf 

15 // 这 里 省 略 了 重复 的 代码 

16 rf 

15 image: require('./images/advertisement-image-01.jpg'), 
18 title: ' 商 品 10'， 

19 subTitle: ' 描 述 10' 

20 

21 l; 

22 } 

23 l 

24 

25 render() { 

26 return ( 

27 <Container> 

28 <Header searchBar rounded> 

29 // 这 里 省 略 了 没有 修改 的 代码 

30 </Header> 


31 <Content> 


32 <Swiper loop={true} height-(190) autoplay={true}> 
33 77 LENE T Et PSC 

34 «/Swiper» 

35 «Content» 

36 «List dataArray={this.state.products} 
37 renderRow-(this. renderRow}> 
38 «/List» E 

39 «/Content» 

40 «/Container» 

41 ye 

42 } 


44 renderRow = (product) => { 

45 = return ( 

46 <ListItem 

47 button 

48 onPress-(() => ( 

49 const {navigator} = this.props; 

50 if (navigator) ( 

5l navigator.push(( 

52 name: 'detail', 

53 component: Detail, 

54 params: ( 

55 productTitle: rowData.title 
56 } 

57 n; 

58 H 

59 ]» 

60 «Thumbnail square size={40} source={product.image}/> 
61 <Text>{product.title}</Text> 

62 «Text note>{product.subTitle}</Text> 

63 </ListItem> 


重新 加 载 应 用 ， 使 用 NativeBase 的 List 相 关 组 件 实现 的 商品 列表 效果 如 图 4.18 所 示 。 


[ 
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图 4.18 ”使 用 NativeBase 实现 的 商品 


至 此 ,一 个 全 新 的 首页 就 完成 了 。 对 比 使 用 NativeBase 前 后 的 Nome.js 文 件 ， 可 以 发 现 这 样 一 个 令 人 震惊 的 事实 : 
后 ，homejjs 文 件 代码 行 数 约 150 行 ， 只 有 之 前 的 一 半 ! 而 且 NativeBase 的 样式 和 效果 还 比 我 们 自己 实现 的 更 美观 。 因 


4.2.3 NativeBase 如 何 解决 跨 平台 问题 


列表 


在 实现 相同 功能 的 情况 下 ， 刚 开始 的 home:js 文 件 有 300 多 行 代码 ， 而 使 用 NativeBase 
此 ， 合 理 使 用 第 三 方 组 件 ， 可 以 大 大 提高 开发 的 效率 和 质量 。 


4.1 节 为 了 实现 分 页 的 效果 ， 使 用 了 平台 差异 化 的 方式 : IOS App 使 用 的 是 TabBarlOS 组 件 ， 而 Android App 使 用 的 是 ViewPagerAndroid 组 件 。 如 果 使 用 NativeBase 提 供 的 Footer Tabs 就 可 以 解决 这 


个 问题 。 修 改 main.iosjs 文 件 的 代码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 


import React, {Component} from 'react'; 
import {Container, Content, Footer, FooterTab, Badge, Button, Icon} from 'native-base'; 


import Home from './home'; 
import More from './more'; 


export default class main extends React.Component { 
constructor (props) { 
super (props) ; 
this.state = { 
selectedTab: 'home' 
} 


} 


render() { 
return ( 
<Container> 
{this. renderContent ()} // Content 的 内 容 会 随 着 .this. state. 


selectedTab 值 的 变化 而 改变 


<Footer > 
<FooterTab> 
«Button active={this.state.selectedTab 


'home'})}> 

首页 

XIcon name-'ios-apps-outline'/» 
«/Button» 
«Button active={this.state.selectedTab 


'more'}) }> 
<Badge>2</Badge> 
更 多 
XIcon name-'ios-compass-outline'/» 
«/Button» 
«/FooterTab» 
«/Content» 
</Container> 
i 
} 


 renderContent() ( 
if (this.state.selectedTab 
return ( 
«Content» 
«Home navigator={this.props.navigator}/> 
«/Content» 


"home') ( 


) 
} else if (this.state.selectedTab 
return ( 
«Content» 
<More navigator={this.props.navigator}/> 
</Content> 


'more') { 


"home" } 
onPress={() => this.setState({selectedTab: 


'more') 
onPress-(() => this.setState((selectedTab: 


重新 加 载 iOS 应 用 ， 效 果 如 图 4.19 所 示 。 


Carrier F + 4:04 PM 


Q 搜索 商品 


Pad mini 2 32G 17992 


iPhone 7 Plus ELELU 


4.9 ”基于 NativeBase 实 现 的 OS App 主 页 


实现 了 iOS App 的 效果 之 后 ， 再 将 main.iosjs 文 件 的 内 容 全 部 复制 至 main.android.js 文 件 中 。 重 新 加 载 Android 应 用 ， 效 果 如 图 4.20 所 示 。 


构 下 ch04 项 目的 文件 即 可 ， 修 改 main.iosjs 文 件 名 为 


NativeBase 的 Foot Tabs 组 件 又 可 以 轻松 地 实现 跨 平台 的 代码 复 用 : 只 需要 和 


从 iOS App 和 Android App 的 代码 实现 和 运行 效果 来 看 ， 使 
结构 如 图 4.21 所 示 。 


mainjs， 并 且 删 除 main.android.js 文 件 。 此 时 ，ch04 项 


CU 搜索 商品 


.Dabelrc 
.buckconfig 
Tlowcontig 
.gitattributes 
.Watchmanconfig 
app. | 

detail.js 

home.|s 


RAAY 5AA FAJA je 
index.android.is 


四 
JS 


package.json 


图 4.21 基于 NativeBase Foot Tabs 重 构 后 的 ch04 项 目 


从 上 述 使 用 第 三 方 组 件 (包括 react-native-swiper、NativeBase 以 及 间接 使 用 的 react-native-vector-icons) 的 例子 中 ， 想 必 读者 已 经 感受 到 合理 使 用 第 三 方 组 件 ， 确 实 可 以 大 大 减少 代码 量 、 提 高 开 


发 效率 。 但 是 ， 使 用 第 三 方 组 件 也 是 有 一 定 风险 的 ， 例 如 ， 作 者 停止 维护 、 发 现 的 问题 修复 不 及 时 、 组 件 的 兼容 性 不 好 等 。 因 此 ， 在 选择 第 三 方 组 件 的 时 候 ， 需 要 仔细 考察 关注 度 、 更 新 频率 、 引 用 次 数 以 
及 开发 者 评价 等 因素 。 
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高 效 工作 一 直 是 职场 人 士 追求 的 目标 ， 本 章 通 过 对 一 些 特定 平台 组 件 和 第 三 方 组 件 的 介绍 ， 让 读者 能 更 高 效 地 开发 属于 自 
简化 了 自己 的 代码 实现 ， 加 快 了 应 用 开发 的 效率 ， 大 大 降低 了 开发 成 本 。 


己 的 App。 尤 其 是 本 书 在 电 商 App 中 引入 了 几 个 热门 的 第 三 方 库 ， 很 大 程度 上 


om ”原生 平台 的 适 配 和 调试 


使 用 React Native 开 发 应 用 时 ， 通 


常 只 需要 了 解 React Native 的 相关 知识 即 可 ， 例 如 ， 本 书 介绍 过 的 React Native 调 试 、Flexbox 布 局 和 适 配 、React Native 组 件 及 第 三 方 组 件 的 使 用 。 但 是 在 一 些 情况 
下 ， 了 解 一 些 原生 平台 的 知识 有 助 于 快速 定位 和 解决 问题 ， 如 第 3 章 完善 首页 的 功能 和 样式 时 遇 到 的 ch04 没 有 注册 的 错误 问题 。 所 以 ， 本 章 将 为 读者 介绍 一 些 平台 适 配 问题 。 


本 章 主 要 内 容 有 : 
"iOS 平台 的 适 配 和 调试 。 


- Android 平 台 的 适 配 和 调试 。 


5.1 ” iOS 平台 的 适 配 


使 用 Xcode 打开 ch04 项 目 中 ios 文 件 夹 下 的 ch04.xcodeproj 文 件 ， 效 果 如 


到 5.1 所 示 。 


v 加 ch04 


(f Placeholders Constraints 


v Ml chos File's Owner 
main.jsoundie j First Responder 
AppDelegate.h x 
v View 
AppDelegate.m 
L | Powered by React Native 
Lich04 
v Constraints 
E cho4.centery = 0.33 
B centerX = ch04.cent 
Libraries E cho leading = leading 
chO4Tests bottom = Powered by... 
Products Powered by React Na 


Resources B centerX = Powered b. 


工程 导航 


Images.xcassets 
Info.plist 
LaunchScreen.xib 


m main.m 


Align Center X to 


cho4 


Align Center Y to 


Equals: 1 


Leading Space to 
š 


配置 选项 


Content Hugging Priority 


可 视 化 区 域 


Horizontal 251 

Vertical 251 
Content Compression Resistance Priority 
Powered by React Native Horizontal 750 


Vertical 750 


K] View as: iPhone 7 («C ^R) 5 B ld 
| Label - A variably sized amount of 
Label static text 


Button - Intercepts touch events and 
M sends an action message to a target 
object when it's tapped. 


Segmented Control - Displays 
multiple segments, each of which 
functions as a discrete button 


Auto © 


All Output 2 j | 


图 5.1 iOS 原 生 项 目 


除了 使 用 源码 方式 实现 适 配 之 外 ，iOS 工 程 中 用 于 适 配 的 相关 资源 主要 有 lmages.xcassets、LaunchScreen.xib 以 及 工程 中 暂 未 使 用 的 storyboard 文 件 。 


Lin : 所 有 iPhone 屏幕 的 详细 尺寸 和 分 辨 率 ， 可 以 参考 该 网 站 的 汇总 The Ultimate GuideToiPhonResolutions (https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) o 


5.1.1 Images.xcassets 适 配 


Images.xcassets 已 经 为 开发 者 定义 好 了 所 需 资源 的 尺 十 和 用 途 ， 只 需要 按照 说 明 添加 响应 的 图 片 资源 即 可 ， 如 图 5.2 所 示 。 


i 4) WG ne Succeeded t 12 @1 — l 
ES 0 asset Apple Phone 60 3x 
v È cho4 M Applcon iPhone | iOS 7.0 and Later c 
v 3 ch04 iPad None c 
main.jsbundie CarPlay All 
h AppDelegate.h Apple Watch None c 
m AppDelegate.m 2x 3x 
pp 9 2 3 Mac [| All 
‘= Images.xcassets M x 1 
Phone Spotlight iOS icon is pre-rendered 


Info.plist iOS 7-10 
LaunchScreen.xib M 


1 
m main.m Teale) FRAT. 
> Libraries 
Platform 
» chO4Tests idiom iPhone 
> [73 Products Size 60 
> M Resources j : Role 


Subtype 


iPhone App 
iOS 7-10 


Scale 3x 


Label - A variably sized amount of 


———————— “~ 


Button - Intercepts touch events and 
Button sends an action message to a target 
object when it's tapped 


Segmented Control - Displays 
ü 2 | multiple segments, each of which 
functions as a discrete button 


S DE] | Auto > = [Be 


图 5.2 iOS 原 生 项 目 中 的 图 片 资源 Images.xcassets 


例如 ，Images.xcassets 中 的 Applcon 指 应 用 图 标的 资源 ，iPhone App iOS7-1060pt 表 示 在 iOS 系 统 版 本 7 ~ 10 之 间 ， 尺 寸 为 60 个 单位 ， 分 为 2x 和 3x 两 种 不 同 缩放 比例 ，2x 用 于 iPhone6、iPhone6s 和 
iPhone7 设 备 ， 图 片 的 实际 分 辨 率 =2x60=120，3x 用 于 iPhone6PIus、iPhone6s Plus 及 iPhone7Plus 设 备 ， 图 片 的 实际 分 辨 率 =3x60=180。 


在 xib 或 storyboard 文 件 中 ，iOSs 适 配 的 技术 基于 自动 布局 (Auto Layout) 系统 ， 自 动 布局 描述 的 是 视图 或 组 件 之 间 的 相对 位 置 关系 ， 它 可 以 在 应 用 运行 时 根据 设备 的 屏幕 尺寸 动态 改变 各 个 试图 或 组 
件 的 尺寸 。 


5.1.2 ”自动 布局 Auto Layout 


在 React Native 开 发 中 ， 想 要 实现 类 似 iOS 平 台 自 动 布局 的 方式 ， 可 以 使 用 Flexbox 布 局 ， 而 iOS 平 台 实 现 自动 布局 的 方法 是 约束 。 约 束 既 可 以 定义 布局 属性 的 具体 值 ， 也 可 以 定位 布局 属性 之 间 的 关 
系 。 例 如 ， 可 以 为 视图 或 组 件 添加 如 下 约束 : 试图 的 高 度 是 4、 两 个 视图 之 间 的 垂直 距离 是 10、 这 些 视图 的 宽度 相等 。 


H 


常见 的 约束 属性 如 下 : 
+ Left; 

: Right; 

: Top; 

+ Bottom; 
* Leading; 
+ Trailing; 
+ Width; 

: Height; 

+ CenterX ; 
* CenterY ; 


+ Baseline. 


这 些 属性 的 含义 如 图 5.3 所 示 。 


可 以 查看 iOS 工 程 中 Auto Layout 的 例子 ， 单 击 iOSs 工 程 LaunchSscreen.xib 文 件 中 的 标题 ch04， 看 到 其 约束 如 图 5.4 所 示 。 


Top 


Trailing 
or Right 


Constraints 


BB Align Center X to: Superview Edit 


Align Center Y to: Supery ew 
Equals: 1 


Leading Space to: Superyvew 
Equals: Default 


Showing 3 of 3 


图 5.4 iOS 原 生 项 目 中 标题 ch04 的 约束 


通过 CenterX 和 CenterY 设 置 该 试图 或 组 件 相对 于 其 SuperView 位 置 的 比例 ， 就 实现 了 不 同 尺寸 屏幕 的 适 配 。 


5.1.3 Size Class 适 配 


虽然 Auto Layout 解 决 了 屏幕 适 配 的 问题 ， 但 是 在 实际 开发 过 程 中 ， 不 同 设备 的 布局 需求 可 能 不 完全 相同 。 例 如 ， 在 实现 iPhone 和 iPad 适 配 的 时 候 ， 一 个 页 面 需要 配置 多 个 xib 进 行 开发 还 是 件 很 头疼 的 
事情 。 好 在 从 iOS8 开 始 ， 苹 果 引入 了 Size Class, 


使 用 Size Class 之 后 ， 可 以 把 各 种 尺寸 屏幕 的 适 配 工 作 放 在 一 个 文件 中 完成 ， 然 后 可 以 通过 不 同类 别 的 Size 来 定制 各 种 尺寸 的 界面 。 换 句 话说 ，xib 或 storyboard 文 件 不 是 一 个 普通 的 xib 或 storyboard 文 
件 ， 而 是 一 个 由 多 个 不 同 布局 合 一 的 xib 或 storyboard， 可 以 管理 多 种 类 型 的 屏幕 。Size Class 的 使 用 如 图 5.5 所 示 。 


5.2 iOS 开 发 的 调试 技巧 


在 了 解 了 iOSs 平 台 的 适 配 方法 之 后 ， 下 面 再 来 介绍 一 些 iOS 开 发 的 调试 技巧 。 


在 刚才 打开 的 iOS 项 目 中 ， 选 择 菜单 Product 一 Run 选 项 之 后 ， 和 react-native run-ios 命 令 效果 一 样 ， 也 可 以 运行 iOS App。 在 iOS App 启 动 之 前 ， 单 击 AppDelegate.m 文 件 中 的 代码 行 数 23， 也 可 以 
添加 一 个 断 点 ， 当 iOS App 启 动 后 ， 应 用 会 停止 在 刚才 添加 断 点 的 第 23 行 代码 处 ， 效 果 如 图 5.6 所 示 。 


> E 从 cho4 ) gi iPhone 7 Running ch04 on iPhone 20: 1 2 ð 
EH BR [B ch04 ch04 ) m AppDelegate.m ) [I] -application:didFinishLaunchingWithOptions: D 
im 39090 ^ (8 2  * Copyright (c) 2015-present, Facebook, Inc. | Identity and Type 
v [E] ch04 PID 12228 DW 3 * All rights reserved. 
cpu ke pu ; : Name AppDelegate.m 
E 5 > This source code is licensed under the BSD-style license found in the ^ r~ 
6  * LICENSE file in the root directory of this source tree. An additional grant Type Default - Objective-C Sou... S 
© Memory 7 * of patent rights can be found in the PATENTS file in the same directory. - 
8 xw Location Relative to Group e 
国 Disk Zero KB/s $ chO4/AppDelegate.m ri 
1 i " . 
@ Network Zero KB/s i A Full Path /Users/yuanlin/Desktop/ 
1 


learnreactnative/code/ch04/ 


v @ Thread 1 Queue: co...ead (seria ios/chO4/AppDelegateem © 


b 四 0 -LAppDelegate application... 


[J 1 -{ulApplication _handieDel 


9 
0 
1 
12 #import «React/RCTBundleURLProvider.h» 
13 simport «React/RCTRootView.h» 
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@implementation AppDelegate On Demand Resource Tags 


口 13 uiAppiicationMain 17 -~ (BooL)application:(urapplication *)application didFinishLaunchingWithOptions: 

V 14 main B. (NSDictionary *)launchOptions | Target Membership 

[3 15 start : " r | 

zn 19 NSURL *jsCodeLocation; . a 

[3 16 start 20 [L_jch04Tests 
> @ Thread 2 Queue: co...ger (seria 21 jsCodeLocation = [[RcTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot?2Q"index.ios" 
> @ Thread 3 fallbackResource:nil]; | Text Settings 

32 
» @ Thread 4 一 e 
fe ple uikit eventteten-thr MEER RcTRootView xrootView = [[AcTRoctView alloc] initwithBundleURL:jsCodeLocation [ux Unicode (UTES) : 
sppe.u 24 moduleNameiG"ch64" Thread 1: breakpoi... Line Endings Default - macos / Unix (LF) © 
» @ Thread 6 25 initialProperties?nil 
> @ com.apple.NSURLConnectionL.. | 26 1sunchOptions : launchOptions]; Indent Using Spaces 9 
> @ Thread 9 27 rootView.backgroundColor = [[UIColor alloc] initwithRed:1.0f green:1.0f blue:1.0f alpha:1]; NA zl zl 
: 28 Tab indent 
>  com.apple.CFSocket.private (10) | 29  self.window = [[UIWindow alloc] initwithFrame:[urScreen mainScreen].bounds]; J) Wrap lines 
> 四 Thread 11 30 — UIViewController *rootViewController = [UIViewController new]; 
> @ JIT Worklist Worker Thread (12) 31 rootViewController.view = rootView; | 
> @ DFG Worklist Worker Thread (1... 32 self .window. rootViewCon 1 rootViewController; 
@ WTF Parallel Helper Thread (14) 33 [self.window makeKeyAndV 

> — €— 34 return YES; 
> (D WTF Parallel Helper Thread (15) 35 } 
» @ WTF Parallel Helper Thread (16) 35 


L ER » VF [4] Thread 1 四 0 -[AppDelegate application:didFinishLaunchingWithOptions:] | 
> 加 self = (AppDe *) 0x61800003bea0 

> E cmd = (SEL) "application:didFinishLaunchingWithOptions:" 

> E application = (UIApplication *) 0x7fa0ab5003c0 

> E launchOptions = (NSDictionary *) nil 

> jsCodeLocation = (NSURL *) @"ħttp://localhost:8081/index.ios.bundie?platform=ios&dev=true&minity=talse" 

> 四 rootView = (RCTRootview *) 0x7fff51f94e50 

> [H rootViewController = (UiviewController *) 0x11297c5c9 
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5.6 iOS 原 生 项 目 断 点 调试 


和 React Native 中 的 断 点 调试 一 样 ， 此 时 也 可 以 查看 当前 应 用 运行 的 相关 信息 : 线程 信息 及 局 部 变量 的 值 等 。 


当然 ， 除 了 使 用 断 点 调试 代码 和 逻辑 外 ，iOSs 平 台 还 提供 了 UI 调 试 的 小 工具 ， 例 如 ， 打 开 iOSs 模 拟 器 的 菜单 Debug 一 Color Blended Layers 选 项 ， 就 可 以 查看 当前 页 面 所 有 组 件 的 位 置 和 布局 ， 效 果 如 图 
5.7 所 示 。 


CR 关于 iOS 平 台 的 UI 调 试 ， 还 有 一 些 优秀 的 第 三 方 工具 ， 例 如 ，FaceBook 出 品 开源 免费 的 chisel (https://github.com/facebook/chisel) 以 及 一 款 商业 付费 软件 Reveal (https://revealapp.com/) ， 它 
们 可 以 在 应 用 运行 时 动态 地 查看 和 调整 UI， 从 而 大 大 提高 布局 开发 的 效率 。 


图 5.7 iOS App 的 原生 UI 调试 工具 


5.3 ”Android 平 台 的 适 配 


相 比 iOS 平 台 的 适 配 ，Android 的 适 配 工 作 更 繁重 ， 情 况 也 更 复杂 。 因 为 ， 相 比较 封闭 的 iOS 平 台 ，Android 平 台 无 论 是 硬件 和 软件 们 都 是 开放 的 ， 所 以 市 场 上 Android 设 备 种 类 更 多 。 


5.3.1” 适 配 原 理 


打开 Android 开 发 工具 Android Studio， 选 择 菜单 Open an existing Android Studio project 工 具 ， 打 开 ch04 项 目的 Android 文 件 夹 ， 如 图 5.8 所 示 。 
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> (sr Gradle Scripts 
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图 5.8 ”Android 原 生 项 目 结构 


通过 Android 的 项 目 结构 ， 想 必 读 者 可 以 隐约 感受 到 : Android 适 配 是 基于 文件 夹 的 ， 不 同 分 辨 率 和 尺寸 的 屏幕 会 自动 适 配 相应 文件 夹 下 的 布局 或 资源 文件 。 但 是 ， 想 要 进一步 理解 Android 的 适 配 ， 有 
必要 先 了 解 Android 适 配 的 一 些 基 本 概念 。 


ARTS 屏幕 尺寸 是 指 手机 屏幕 对 角 线 的 英寸 数 。 
. 屏幕 分 辨 率 : REPRE 


“ 屏幕 像素 密度 : 屏幕 像素 密度 是 指 手机 屏幕 对 角 线 上 单位 英寸 内 的 像素 数 。 


另外 ， 编 写 代码 时 常用 的 尺寸 单位 如 下 。 


- px: 像素 。 


-dp (dip 的 缩写 ) : 规定 密度 为 160 的 屏幕 上 ，1 像 素 对 应 的 尺寸 为 ltp。320 密 度 的 屏幕 上 ，1 像 素 对 应 0.5dp， 依 此 类 推 。 在 密度 为 160 的 屏幕 上 ，1 英 十 有 160 个 像素 ， 那 么 1px 对 应 的 尺寸 =1/160 英 十 ， 
即 dp 是 个 物理 尺寸 ， 跟 像素 无 关 。 所 以 ，100dp 的 尺寸 在 不 同 手机 上 显示 出 来 ， 物 理 尺 寸 看 上 去 基本 是 一 样 的 。 


+ sp (Scale-independent Pixel) ， 即 与 缩放 无 关 的 抽象 像素 。sp 和 dp 很 类 似 ， 唯 一 的 区 别 是 ，Android 系 统 允 许 用 户 自 定义 文 字 尺 寸 大 小 Ob. EH. A. RAF) ， 当 文字 尺寸 是 “ 正 


常 ”时 ，1sp=1ldp=0.00625 英 寸 ， 而 当 文字 尺寸 是 “大 


在 创建 项 目的 时 候 ， 会 自动 创建 不 同 的 mipmap 或 layout 文 件 夹 〈 在 不 同 像素 密度 上 提供 不 同 的 图 片 ) ， 文 件 夹 的 后 缀 表明 了 该 布局 或 资源 的 像素 密度 (dp) 范围 ， 对 应 关系 如 表 5.1 所 示 。 


后 
mdpi 
hdpi 
xhdpi 
xxhdpi 
xxxhdpi 


对 于 上 述 Android 项 目 中 的 mipmap 文 件 夹 ，Android 的 适 配 机 制 是 这 样 的 : 系统 会 先 到 后 缀 与 设备 


”或 “超大 ”时 ，1sp>1dp=0.00625 英 寸 。 


表 5.1 Android H+ RGAE SHARE RE (dp) 范围 的 对 应 关系 


像素 密度 (dp) 的 范围 


5 


往 高 一 级 的 目录 找 ， 如 果 还 是 找 不 到 ， 就 退 而 求 其 次 去 低 一 级 的 目录 找 ， 依 此 类 推 。 


例如 ， 在 密度 为 xxhdpi 的 手机 上 运行 Android Ap 


到 就 去 drawable-xhdpi 目 录 下 找 ， 接 着 去 drawable-hdpi 目 录 下 ， 直 到 找到 对 应 的 图 片 资源 。 当 找到 图 


话 ， 有 可 能 造成 图 片 因 缩放 而 变 得 模糊 。 


120dp 一 160dp 
160dp~240dp 
240dp~320dp 
320dp—480dp 
480dp~ 640dp 


匹配 的 mipmap 目 录 下 找 对 应 的 


图 片 ， 当 找 不 到 的 时 候 会 去 更 高 一 级 的 目录 找 ， 如 再 找 不 到 ， 则 继续 


p， 首 先 会 在 drawable-xxhdpi 目 录 下 寻找 图 片 资源 ， 找 不 到 再 去 drawable-xxxhdpi 目 录 下 找 ， 如 果 没有 比 drawable-xxxhdpi 更 高 的 目录 ， 则 再 找 不 


片 资源 后 ， 系 统 会 按 密度 对 


图 片 做 缩放 处 理 ， 然 后 再 显示 到 屏幕 上 。 所 以 如 果 


图 


片 放 的 


录 不 正确 的 


同样 ， 用 于 存放 布局 文件 的 layout 目 录 也 是 通过 后 缀 名 来 适 配 的， 只 不 过 layout 文 件 夹 通常 添加 设备 分 辨 率 作为 后 缀 ， 如 layout-1280x720、layout-1920x1080 及 layout-land-1280x720 等 。 


不 难看 出 ， 以 上 适 配 方法 和 上 述 iOS 开 发 中 的 Size Class 是 类 似 的 ， 即 用 于 分 类 适 配 。 
5.3.2 ”常用 的 适 配 属性 

在 Android 实 际 编码 中 ， 为 了 支持 不 同 屏幕 尺寸 ， 使 用 如 下 属性 。 

1. wrap_content 方 式 

wrap_content 布 局 元 素 将 根据 内 容 更 改 大 小 ， 示 例 代码 如 下 : 

01 <?xml version-"1.0" encoding-"utf-8"?» 

02 <LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 

03 android:layout width-"match parent" 

04 android:layout height-"match parent" 

05 android:orientation-"vertical"» 

06 

07 «Button 

08 android: id="@+id/button1" 

09 android:layout width-"wrap content" 

10 android:layout height-"wrap content" 

11 android:text-"buttonl" /> 

12 

13 «Button 

14 android: id="@+id/button2" 

15 android:layout width-"wrap content" 

16 android:layout height-"wrap content" 

i7 android:text-"button2" /> 

18 

19 </LinearLayout> 


此 时 ， 使 用 wrap_content 方 式 布局 的 按钮 效果 如 


© 


图 5.9 所 示 。 
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图 5.9 wrap_content 布 局 


2. match_parent 方 式 


match_parent 自 动 填 满 整 个 父 元 素 的 空间 ， 示 例 代码 如 下 : 


ing-"utf-8"?» 
tp: //schemas . android.com/apk/res/android" 


01 <?xml version="1.0" encod: 
02 <LinearLayout xmlns:android= 


03 h parent" 

04 -"match parent" 

05 :orientation-"vertical"» 

06 

07 

08 id="@+id/bu p 

09 layout width-"match parent" 


10 


android:layout height-"wrap content" 


11 android:text-"buttonl" /» 

12 

13 «Button 

14 android: id="@+id/button2" 

15 android:layout width-"match parent" 
16 android:layout height-"wrap content" 
17 android:text-"button2" /» 

18 

19 </LinearLayout> 

此 时 ， 使 用 match_parent 方 式 布局 的 按钮 效果 如 图 5.10 所 示 。 


o 


AndroidScreenAdaption 


BUTTONI 


BUTTON2 


图 5.10 ”match_parent 布 局 


3. ConstraintLayout 方 式 


尽管 Android 开 发 中 可 以 使 用 上 述 布局 方法 ， 但 是 Android 平 台 还 是 从 Android Studio2.2 版 本 开始 加 入 了 一 种 全 新 的 布局 方法 
ConstraintLayout (https;//developer.android.com/training/constraint-layout/index.html) 。 简 单 来 说 ， 这 种 布局 方式 和 上 面 介 绍 的 iOS 
组 件 之 间 的 关系 。 


以 下 代码 演示 了 如 何 使 用 ConstraintLayout 方 式 实现 子 视图 或 组 件 居中 的 效果 。 


Lia 如 果 想 要 体验 全 新 的 ConstraintLayout 编 辑 器 ， 请 确保 Android Studio Wk AA Android Studio2.2 3i, € $f- 


01 <?xml version-"1.0" encoding-"utf-8"?» 

02 «android.support.constraint.ConstraintLayout 

03 xmlns:android-"http://schemas.android.com/apk/res/android" 

04 xmlns:app-"http://schemas.android.com/apk/res-auto" 

05 xmlns:tools-http://schemas.android.com/tools 

06 android:id="@+id/activity_main" 

07 android:layout width-"match parent" 

08 android:layout height-"match parent" 

09 tools:context-"com.example.rn.androidscreenadaption.MainActivity"» 
10 

aT <TextView 

12 android:layout_width="wrap_content" 

13 android:layout_height="wrap_content" 

14 android:text-"Hello World!" 

15 app:layout constraintBottom toBottomOf-"(-id/activity main" 
16 app: layout_constraintLeft_toLeftOf="@+id/activity main" 

17 app: layout_constraintRight_toRightOf="@+id/activity main" 
18 app: layout_constraintTop_toTopOf="@+id/activity_main" /> 
19 

20 </android. support .constraint .ConstraintLayout> 


此 时 ， 使 用 ConstraintLayout 方 式 布局 的 按钮 效果 如 


5.11 所 示 。 


D 


o 


AndroidScreenAdaption 


(Auto Layout) 有 相似 之 处 ， 即 描述 的 都 是 视 


区 


54 Android 平台 的 调试 技巧 


Android 平 台 的 调试 和 其 他 平台 的 调试 也 很 类 似 ， 例 如 ， 在 Android Studio 打 


， 效 果 如 图 5.12 所 示 。 


Debug 一 Debug “app” 选 项 ， 即 可 调试 Android 应 


图 5.11 ConstraintLayout4p ÆJ 


的 工程 中 ， 打 开源 码 MainActivityjava， 然 后 将 鼠标 光标 移 至 代码 编辑 


如 果 要 调试 原生 项 目的 实现 和 逻辑 ， 可 以 使 用 上 述 方法 ; 如果 要 调试 Android 的 布局 ， 可 以 使 用 React Native 的 调试 选项 Toggle Inspector, 


晃动 Android 设 备 或 者 在 Android 模 拟 器 上 使 用 快 


捷 键 (command+M) 打 : 


调试 选项 ， 然 后 选择 Toggle Inspector 选 项 ， 此 时 | 


E RSZrf E, 8 


点 ， 接着 选择 菜 生 


击 任意 组 件 ， 即 可 查看 该 组 件 的 布 


局 信息 ， 效 果 如 


5.13 所 示 。 
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Q MainActivity 


ctivity java 


MainActivity onCreate() 


package com.example.rn.androidscreenadaption; 


class MainActivity extends AppCompatActivity { 


protected void onCreate(Bundle 


super.onCreate 


setContentView(R. layout.act 


= Variables 
+ > 


aption) 


5.12 Android 原生 项 目 断 点 调试 


4! la 4:23 


> Ll > > 
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第 6 章 React Native 的 服务 器 端 处 理 


143.3 


图 5.13 ”打开 Togsle Inspector 调 试 布局 


av iOS App 也 可 以 使 用 React Native 的 上 述 布局 调试 方法 ， 有 兴趣 的 读者 可 以 按照 Android App 的 介绍 自己 尝试 一 下 。 


小 结 


平台 的 适 配 一 直 是 创始 人 或 CTO 最 关心 的 问题 ， 这 涉及 开发 成 本 和 开发 周期 ， 所 以 本 章 的 内 容 对 创业 者 很 关键 。 笔 者 殷切 地 期 望 通过 本 章 的 学 习 和 讨论 后 ， 读 者 能 够 做 到 独立 地 开发 基于 React Native 


在 本 书 的 2 ~ 4 章 中 ， 我 们 已 经 实现 了 电 商 应 用 的 主要 功能 。 
开发 角度 : 结合 服务 端 来 完善 我 们 的 React Native 应 用 。 


本 章 主要 内 容 有 : 

“ 掌握 Node.js 的 原理 和 开发 流程 。 

“ 学 习 服 务 器 端 接 口 设计 规范 RESTful。 
"了解 网 络 前 后 端 交互 的 原理 。 


- 实现 App 从 服务 器 获取 数据 。 


， 学 而 时 习 之 ， 自 己 动手 练习 和 编码 才 是 掌握 一 门 开 发 技能 的 最 有 效 方法 。 


但 是 除了 修改 代码 的 方法 之 外 ， 应 


用 内 的 数 


届 是 无 法 更 新 的 ， 而 应 


的 实际 数据 往往 都 是 从 服务 器 动态 获取 的 。 


因此 ， 本 章 将 扩展 一 个 新 的 


“ 实现 App 数 据 的 本 地 化 存储 。 


6.1 学 习 Nodejs 


常见 的 服务 端 开发 语言 和 技术 有 很 多 种 ， 例 如 : 


- 基于 Java 的 Spring (https://springio/) ; 


- 基于 Ruby 的 Ruby on Rails (http://rubyonrails.org/). ; 


- 基于 Python 的 Django (https://www.djangoproject.com/) ; 


- 基于 JavaScript 的 Node.js (https://nodejs.org/en/) ; 


- 以 及 其 他 一 些 常 用 的 建站 技术 ,例如 PHP (http://www.php.net/) 、ASP (https://www.asp.net/) 等 。 


但 是 一 说 到 Node.js， 对 于 本 书 的 读者 想必 肯定 是 有 印象 的 ， 在 搭建 React Native 开 发 环境 中 ， 作 为 React Native 开 发 的 基础 ， 本 书 就 已 经 安装 并 介绍 了 Node.js 的 使 用 ， 并 且 在 React Native 应 用 的 开 
发 过 程 中 ， 我 们 还 熟悉 了 Node.js 配 套 的 npm (Node.js 的 包 管理 器 ) 工具 的 使 用 。 


6.1.1 什么 是 Nodejs 


众所周知 ，JavaScript 是 一 门 脚本 语言 ， 脚 本 语言 都 需要 一 个 解析 器 才能 运行 。 对 于 写 在 HTML 页 面 里 的 JavaScript， 浏 览 器 充当 了 解析 器 的 角色 。 而 对 于 独立 运行 的 JavaScript 代 码 ，Node.js 就 是 它 的 


解析 器 。 


所 以 简单 来 说 ，Node.js 就 是 一 个 让 JavaScript 运 行 在 服务 端的 开发 平台 ， 它 让 JavaScript 成 为 脚本 语言 世界 的 一 等 公民 ， 在 服务 端 堪 与 Ruby、Python、PHP 平 起 平 坐 。Node.js 基 于 Google 
V8Javascript 引 警 ，V8 引 警 执行 Javascript 的 速度 非常 快 ， 性 能 非常 好 。 


问题 : 都 说 Node.js 是 用 来 开发 服务 端 程序 的 ， 可 是 开发 者 往往 使 用 Node.js 开 发 React Native 移 动 端 应 用 啊 ? 


回答 : 这 里 所 说 的 服务 端 ， 指 的 是 广义 上 的 C-S (Client-Server) 架构 ， 使 用 React Native 开 发 应 用 时 ， 首 先 也 会 运行 一 个 Node.js 服 务 来 监听 和 响应 应 用 的 请 求 ， 所 以 这 种 说 法 并 不 矛盾 。 


6.1.2 ”为 什么 选择 Node.js 


虽然 了 解 了 Nodejs 是 什么 ， 却 仍然 不 能 解决 这 样 的 疑问 : 为 什么 选择 Node.js? 或 者 说 Node.js 都 有 哪些 优势 呢 ? 


Baz: 为 了 表述 简便 ， 同 时 遵守 官方 的 命名 规范 ， 本 书 下 文中 的 Node.js 简 称 Node， 请 读者 知悉 。 


1. 统一 的 开发 语言 


Node 是 使 
者 来 说， 无 疑 是 一 个 


2. 简单 易学 


从 开发 语言 的 角度 来 看 ，JavaScript 相 比 C、C++ 以 及 Java 等 语言 入 


Javascript 语 言 开 发 的 ， 而 读者 已 经 知道 javaScript 不 仅 可 以 开发 Web 前 端 以 及 React Native 移 动 端 ， 还 能 够 开发 服务 端 ， 这 样 JavaScript 就 变 成 了 一 个 前 后 端 “ 通 吃 ”的 语言 。 对 于 开发 
巨大 的 福音 : 掌握 一 门 开 发 语言 ， 就 可 以 开发 不 同 平台 不 同 场景 的 程序 。 


门 简单 很 多 ， 如 果 开 发 者 已 经 了 解 Web 前 端 或 React Native 开 发 ， 那 么 上 手 Node 将 更 加 容易 。 


从 原理 上 看 ，Node 又 保持 了 Javascript 在 浏览 器 中 单线 程 的 特点 。 单 线程 的 最 大 好 处 是 不 用 像 多 线程 编程 那样 过 多 地 考虑 同步 问题 ， 这 里 没有 死 锁 的 存在 ， 也 没有 线程 上 下 文 交换 所 带 来 的 性 能 上 的 开 


01 const fs = require('fs'); 

02 

03 fs.readFile('/path/to/filel', function (err, file) ( 
04 console. log (' 读 取 文件 1 完成 '); 

05 Dn; 

06 

07 fs.readFile('/path/to/file2', function (err, file) ( 
08 console. log (' 读 取 文件 2 完成 '); 

09 n; 

10 

11 console. log (' 读 取 文 件 1 和 文件 2' ) ; 


因此 在 Node 中 ， 绝 大 多 数 的 操作 都 以 异步 的 方式 进行 调用 ， 例 如 下 面 读 取 文件 内 容 的 代码 : 


由 于 Node 的 异步 特性 ， 上 述 代码 打印 信息 如 下 : 


读 取 文件 1 和 文件 2 
读 取 文件 1 完成 
读 取 文 件 2 完成 


如 果 文件 2 早 于 文件 1 读 取 完 毕 的 话 ， 打 印信 息 还 可 能 是 : 


读 取 文件 1 和 文件 2 
读 取 文件 2 完成 
读 取 文件 1 完成 


3. 高 性 能 


ay 


Node 使 有 


异步 /O 和 本 


Arr Google V8JavaSctipt 引 擎 是 由 Google 开 发 的 开源 JavaSctipt 引 擎 ， 最 开始 主要 所 


H, KERA 


件 驱动 代 蔡 多 线程 ， 带 来 了 很 大 的 性 能 提升 。 另 外 ，Node 在 使 


强大 的 Google V8JavaScript 引 擎 的 同时 ， 还 使 用 了 高 效 的 libev 和 和 libeio 库 支持 事件 驱动 和 异步 |/O。 


于 Google Chrome 中 。Google 研 发 V8 引 擎 的 主要 原因 是 因为 Google 对 既 有 JavaSctipt 引 擎 的 执行 速度 不 满意 。 因 


avaSctipt 执 行 效 率 和 性 能 的 V8 引 擎 一 经 推出 ， 就 由 于 良好 的 性 能 吸引 了 相当 的 注目 。 


4. BFE 


从 本 书 搭建 React Native 开 发 环境 中 Node 的 安装 过 程 中 读者 可 能 知道 : Node 安 装 包 支 持 现在 主流 的 几乎 所 有 的 操作 系统 ， 如 Windows、macOS、Linux， 同 时 ， 还 可 以 下 载 源 代码 自 


另外 ，Node 底 层 核心 模块 主要 由 C/C+ + 语言 编写 ， 


此 ， 很 容易 做 到 跨 平 台 。Node 基 于 libuv 实 现 的 跨 平台 架构 如 图 6.1 所 示 。 


Node.js 


Windows 


5. 社区 活跃 


Node 有 着 非常 庞大 的 开发 者 社区 和 很 高 的 活跃 


图 6.1 Node 跨 平台 结构 


度 ， 相 比 React Native 的 生态 系统 ，Node 项 目 在 Github 上 的 关注 


度 和 更 新 频率 也 非常 高 。 两 者 对 比如 


图 6.2 和 


图 6.3 所 示 。 


行 编译 安装 。 
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图 6.2 React Native 项 目 在 Github 上 的 关注 度 和 贡献 
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图 6.3 Node 项 目 在 Github 上 的 关注 度 和 贡献 


同时 ， 围 绕 npm 建 立 起 来 的 庞大 的 第 三 方 包 生态 圈 ， 大 大 提高 了 Node 开 发 的 效率 。 网 站 Module Counts (http://www.modulecounts.com/) 对 比 了 常用 语言 和 技术 的 第 三 方 包 数 量 ， 如 图 6.4 所 
示 。 不 难看 出 ，npm 的 第 三 方 包 数 量 遥 遥 领 先 ! 
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图 6.4 Module Counts 网 站 统计 的 常用 语言 和 技术 的 第 三 方 包 数量 


6.1.3 ”安装 和 使 用 nvm 


Node 对 开发 者 如 此 友好 ， 所 以 本 书 就 使 用 Node 来 开发 React Native 电 商 App 的 服务 端 。 


在 正式 开发 之 前 ， 首 先 需要 安装 和 配置 Node。 由 于 搭建 React Native 开 发 环境 中 已 经 介绍 了 使 用 安装 包 的 安装 方法 。 所 以 ， 这 里 介绍 另 一 种 实际 开发 中 更 常用 的 安装 方法 nvm。 


由 于 Node 社 区 非常 活跃 ， 版 本 更 新 频繁 ， 所 以 实际 开发 中 常常 需要 一 个 版 本 管理 工具 ，nvm (https://github.com/creationix/nvm) 就 是 这 样 一 个 Node 版 本 管理 器 。 


CR 除了 nvm 之 外 ，Node 的 版 本 管理 器 还 有 n (https://github.com/tj/n) ， 没 错 ， 名 字 就 是 这 么 简单 。 


(1) 在 macOS 或 Linux 系 统 上 ，nvm 的 安装 比较 简单 ， 使 用 如 下 命令 即 可 。 


// 使 用 curl 


curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install. sh | bash 


// 或 者 使 用 wget 
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install. sh | bash 


在 Windows 系 统 上 ， 可 以 下 载 安装 包 来 安装 ， 项 目地 址 为 https://github.com/coreybutler/nvm-windows。 


(2) nvm 安 装 成 功 后 ， 可 以 通过 如 图 6.5 所 示 的 命令 进行 验证 。 


Ca 如 果 nvm 安 装 成 功 之 后 ， 还 是 找 不 到 nvm 工 具 或 命令 ， 可 以 尝试 重新 加 载 环境 变量 或 重启 终端 。 


(3) 使 用 如 下 命令 查看 和 安装 Node。 


nvm ls-remote // 查看 可 用 的 Node 版 本 列表 
nvm install 6.9.0 // 这 里 安装 LTS 版 本 6.9.0 


(4) 安装 完 LTS 版 本 的 Node 之 后 ， 将 该 版 本 Node 设 置 成 默认 使 用 的 Node， 命 令 如 下 : 


nvm alias default 6.9.0 // 设置 6.9.0 版 本 为 默认 使 用 的 Node 


(5) 最 后 ， 可 以 通过 如 下 命令 验证 Node 安 装 和 nvm 配 置 是 否 成 功 ， 如 图 6.6 所 示 。 


--version 


图 6.5 ”查看 nvm 版 本 号 


) 
] Cdefault) 


( ) Cdefault) 
iojs N/A (default) 
+ ~ node --version 


E]6.6 ”查看 nvm 安 装 的 Node 版 本 和 当前 使 用 的 Node 版 本 


在 Node 安 装 和 配置 成 功 后， 就 可 以 使 用 Node 进 行 开发 了 。 


(1) 新 建 一 个 Node 文 件 夹 ， 在 该 文件 夹 下 新 建 hellonode.js 文 件 ， 命 令 如 下 : 


mkdir Node 
cd Node 
touch hellonode.js 


A 是 示 : 上 述 命令 的 用 法 和 解释 ， 读 者 可 以 参考 第 2 章 的 内 容 。 
(2) 在 hellonodejs 文 件 中 添加 如 下 代码 : 


01 console.log("Hello Node.js!"); // 打印 \Hello Node.js!” 


(3) 此 时 ， 使 用 node 命 令 执 行 该 文件 ， 效 果 如 图 6.7 所 示 。 


当然 ， 除 了 使 用 文件 的 方式 运行 Node 程 序 外 ， 对 于 简单 程序 ， 还 可 以 使 


命令 行 交互 的 方式 ， 如 图 6.8 所 示 。 


+ Node node hellonode.js 


Hello Node.]js! 


图 6.7 使 用 node 执 行 hellonode.js 文 件 


+ Node node 
> console. log("Hello Node. js!"); 


Hello Node.]js! 


6.8 ” Node 命令 行 模式 


(4) 除了 上 述 打印 日 志 的 基本 功能 外 ， 再 看 看 Node 读 取 文 件 的 实现 ， 来 体验 一 下 Node 异 步 |/O 操 作 。 新 建 两 个 测试 文件 file1 和 file2，file1 的 内 容 是 “文件 1”，file2 的 内 容 是 “文件 2”: 


echo 文件 1 > filel 
echo 文件 2 > file2 


A 上 述 命令 中 ，echo 用 来 将 一 段 字符 输出 到 标准 输出 上 ，“>” 是 重 定向 符 ， 表 示 将 ccho 命 令 输出 的 字符 重 定向 到 名 为 fe1 的 文件 中 。 当 然 ， 读 者 也 可 以 使 用 自己 就 悉 的 代码 编辑 器 实现 同样 的 
效果 如 图 6.9 所 示 。 


(5) 新 建 readfile.js 文 件 ， 并 添加 以 下 代码 : 


02 

03 fs.readFile('filel', function (err, file) { 
04 console.1log(' 文 件 1 的 内 容 : ' + file); 
05 n; 

06 

07 fs.readFile('file2', function (err, file) { 
08 console.1og(' 文 件 2 的 内 容 : ' + file); 
09 D; 

10 

11 console.1log('!" 读 取 文 件 1 和 文件 27) ; 


(6) 此 时 ， 使 用 node 命 令 执 行 该 文件 ， 结 果 如 图 6.10 所 示 。 


+ Node echo 文件 1 > filel 
+ Node echo x # 2 > file2 
+ Node cat filel 
x F1 

Node cat file2 


+ Node node readfile.js 


iE EX S lH x 02 
文件 1 的 内 容 : 文件 1 


文件 < 


图 6.10 使 用 node 执 行 readfile.js 文 件 结果 


从 这 里 的 打印 人 以 看 出 : Node 不 需要 等 待 文件 读 取 完 ， 就 会 在 读 取 文件 时 同时 执行 下 面 的 代码 ， 从 而 大 大 提高 了 程序 的 性 能 。 另 外 ， 由 于 异步 操作 是 非 阻 塞 的 ， 所 以 Node 会 使 用 回调 函数 来 传递 
文件 读 取 的 结果 。 


2. HTTP 服 务 器 


可 能 读者 对 于 上 面 的 例子 觉得 还 是 太 简单 了 ， 因 为 打印 日 志和 读 取 文 件 ， 对 于 任何 语言 都 “不 在 话 下 ”。 而 Node 可 以 说 是 为 网 络 开发 而 生 的 平台 ， 所 以 能 做 到 的 事情 当然 远 不 止 这 些 ， 下 面 使 用 Node 
开发 一 个 服务 端 程序 。 


有 过 Java 或 PHP 开 发 经 验 的 读者 可 能 知道 : 当 使 用 Java 或 PHP 来 开发 服务 器 时 ， 需 要 Apache (http://httpd.apache.org/) Nginx (http://nginx.org/) 的 HTTP 服 务 器 ， 即 “浏览 器 -HTTP 服 务 器 - 
PHP 解 释 器 ”的 结构 。 但 是 对 于 Node 来 说 ， 它 不 仅仅 实现 了 应 用 ， 同 时 还 实现 了 HTTP 服 务 器 ， 即 Node 将 HTTP 服 务 器 剥离 开 ， 让 服务 端的 结构 简化 成 “浏览 器 -Node”。 在 进一步 了 解 了 使 用 Node 进 行 
服务 端 开发 的 优势 之 后 ， 赶 紧 开 始 下 面 的 例子 吧 。 


(1) 新 建 serverjs 文 件 ， 并 添加 如 下 代码 : 


01 // 载 入 HTTP 模 块 


02 const fs = require('fs'); 

03 

04 http.createServer(function (req, res) ( 

05 // HTTP 状 态 值 : 200， 内 容 类 型 : text/html 

06 res.writeHead(200, ('Content-Type': 'text/html']); 

07 res.write('«hl»Hello Node.js!«/hl»'); 

08 res.end('«p»The End«/p»'); 

09 }) . listen (8888) ; 

10 

11 console.log("HTTP server is running at http://127.0.0.1:8888/"); 


(2) 仍然 使 用 node 命 令 执 行 该 文件 ， 效 果 如 图 6.11 所 示 。 


Ou 此 时 程序 并 没有 结束 退出 ， 通 过 createServer 创 建 的 server， 调 用 listen () 方法 会 一 直 监 听 指 定 的 端口 号 8888。 


(3) 打开 浏览 器 访问 地 址 http://127.0.0.1: 8888/， 就 会 看 到 内 容 为 Hello Nodejs! 的 网 页 ， 如 图 6.12 所 示 。 


+ Node node Server .]S 


HTTP server is running at http://127.0.0.1:8888/ 


| 


图 6.11 使 用 node 执 行 sServer.js 文 件 结果 


[3 127.0.0.1:8888 x 


© 127.0.0.1 


Hello Node. js! 


The End 


图 6.12 使 用 浏览 器 请 求 Node 服 务 器 


至 此 ， 用 Node 实 现 的 最 简单 的 HTTP 服 务 器 就 完成 了 。 


6.2 ”服务 端 接口 的 设计 : RESTful 


在 掌握 了 Node 的 基本 概念 和 用 法 之 后 ， 原 本 就 可 以 为 React Native 电 商 App 开 发 服务 端 程序 了 。 但 是 本 着 先 理 清 设计 再 开发 的 原则 ， 有 必要 先 了 解 服务 端 接口 的 设计 规范 RESTful API. 


对 于 RESTful API 规 范 ， 首 先 令 人 不 解 的 应 该 就 是 REST 的 含义 了 。 


REST (Representational State Transfer 的 缩写 ) 即 表述 性 状态 转移 ， 是 Roy Fielding 博 士 (https://en.wikipedia.org/wiki/Roy Fielding) 在 其 2000 年 的 博士 论文 中 提出 来 的 一 种 软件 架构 风格 。 表 
述 性 状态 转移 是 一 组 架构 约束 条 件 和 原则 ， 满 足 这 些 约束 条 件 和 原则 的 应 用 程序 或 设计 就 是 RESTful。 


不 过 ， 概 念 远 没有 例子 更 容易 理解 ， 所 以 这 里 以 RESTfu| 定 义 的 电 商 应 用 API 为 例 ， 来 让 读者 对 RESTful 有 一 个 更 直观 的 认识 。 


按照 RESTful 的 设计 原则 即 每 一 个 网 址 代表 一 种 资源 ， 所 以 地 址 中 一 般 只 是 用 名 词 ， 而 不 用 动词 ， 例 如 


+ http://127.0.0.1: 8888/advertisements: 表示 广告 API。 


+ http://127.0.0.1: 8888/products: 表示 商品 API。 


Cuz: -E3ERESTful API 的 服务 器 地 址 ， 在 实际 开发 中 要 替换 成 实际 服务 器 地 址 。 


而 对 资源 的 不 同 操作 ， 通 过 HTTP 协 议定 义 的 方法 来 区 分 。 其 中 ，HTTP 协 议定 义 的 常 
- GET: 请 求 获取 指定 资源 。 

| POST: 向 指定 资源 提交 数据 。 

“ PUT: 请 求 服务 器 存储 一 个 资源 。 

| DELETE: 请 求 服务 器 删除 指定 资源 。 

| HEAD: 请 求 指定 资源 的 响应 头 。 


: OPTIONS: 返回 服务 器 支持 的 HTTP 请 求 方法 。 


RESTful API 主 要 使 用 以 下 4 种 HTTP 方 法 操作 资源 。 


. GET: 请 求 获取 制定 资源 ， 即 查询 操作 。 


POST: 请 求 服务 器 新 建 资源 ， 即 新 建 操作 。 


PUT: 请 求 服务 器 更 新 资源 ， 即 更 新 操作 。 


: DELETE: 请求 服务 器 删除 指定 资源 ， 即 删除 操作 。 


因此 按照 RESTfu 规 范 ， 商 品 API 的 设计 如 下 。 

* http://127.0.0.1:8888/products GET: 获取 所 有 商品 。 

* http://127.0.0.1:8888/products POST: 新 建 商 品 。 

* http://127.0.0.1:8888/products/ID PUT: 更 新 某 一 指定 ID 的 商品 。 

* http://127.0.0.1:8888/products/ID DELETE: 删除 某 一 指定 ID 的 商品 。 
如 果 查 询 操作 获取 的 数量 太 多 ， 还 可 以 在 API 中 添加 过 滤 信息 。 

* httpb://127.0.0.1:8888/products?limit=10GET 为 获取 指定 数量 的 商品 


+ http://127.0.0.1:8888/products?offset=10GET 为 获取 指定 开始 位 置 的 商品 。 


方法 如 下 。 


+ http://127.0.0.1:8888/products?page=2&per_page=10GETA RIG ZH dg fe dc 3 69 A eo 


“http://127.0.0.1:8888/products?product_type=1GET 为 获取 指定 类 型 的 商品 。 


当然 ， 以 上 只 是 对 RESTful 规 范 做 了 一 个 简单 的 介绍 ， 实 际 开发 中 还 需要 考虑 Web 页 面 和 API 的 分 离 、API 版 本 控制 以 及 HTTP 状 态 码 等 。 但 是 上 述 内 容 已 经 基本 满足 本 书 的 开发 需求 ， 所 以 在 此 就 不 做 过 


多 介绍 了 。 


想 要 了 解 更 多 RESTful 规 范 ， 读 者 可 参考 相关 书籍 和 教程 。 


6.3 ”实现 电 商 App 的 服务 器 端 接口 


在 熟悉 了 RESTful API 的 设计 之 后 ， 就 可 以 开始 动手 开发 我 们 的 服务 器 了 。 


从 上 面 的 例子 可 以 知道 ，Node 已 经 提供 了 HTTP 模 块 ， 但 是 在 实际 开发 中 ， 却 不 会 直 


接 使 用 它 来 进行 Web 开 发 ， 因 为 Node 提 供 的 HTTP 模 块 仅仅 是 对 HTTP 服 务 器 内 核 进行 了 封装 ， 但 是 实际 开发 的 


Web 服 务 器 ， 不 仅仅 需要 处 理 HTTP 请 求 ， 还 包括 Cookie 和 会 话 管理 、 路 由 控制 以 及 模板 泻 染 等 。 因 此 ， 可 以 使 用 第 三 方 Web 框 架 来 加 快 服务 器 开发 。 


6.3.1 ”Express 框 架 


这 里 笔者 选择 Express (http://www.expressjs.com.cn/) 开发 框架 ， 因 为 它 是 目前 最 稳定 、 功 能 最 强大 而 且 使 用 也 最 广泛 的 Node 框 架 。 


Cen: 比较 流行 的 Node 开 发 框架 还 有 Koa (http://koajs.com/) o 


Express 除 了 为 HTTP 模 块 提供 了 封装 之 外 ， 还 实现 了 Web 开 发 中 常用 的 如 下 功能 : 


ETE 


C 模板 解析 ; 


“ 静态 文件 服务 ; 


. 错误 控制 器 ; 


“访问 日 志 ; 


“ 缓存 ; 


“ 插件 。 


这 里 需要 重点 关注 的 是 插件 的 支持 。 这 是 源 于 Express 的 设计 : 做 一 个 轻 量 级 的 Web 框 架 。 例 如 ，Express 并 不 支持 例如 常见 的 ORM (Object Relation Model， 对 象 关 系 模型 ) ， 但 是 Express 支 持 并 
拥有 大 量 的 第 三 方 插件 ， 添 加 插件 同样 可 以 实现 ORM。 这 种 插件 化 的 设计 ， 大 大 降低 了 耦合 性 ， 是 一 种 值得 借鉴 的 设计 理念 。 


Dunn: 45214 (Coupling) G4MSR, IRR IS] X CIE E00 RE. BER S AAR RKR, LEMAR. AAKA URË A. BORRIEAGR E, HIAR, B 
AARI ERR 0 BRAG P 38 870] 48 SR fo N RANE A ERR SLE HEU daos XL DREA — AE AL RAB So 


1. 安装 和 使 用 Express 


(1) 安装 Express 应 用 生成 器 ， 命 令 如 下 : 


npm install express-generator -g // -g 参数 表示 全 局 安装 


(2) 安装 成 功 后 ， 可 以 通过 如 图 6.13 所 示 方 法 验证 。 


+ ~ express --version 
4.14.0 
+ ~ express -h 


Usage: express [options] [dir] 


Options: 


-h, --help output usage information 
--version output the version number 
add ejs engine support 
add pug engine support 
add handlebars engine support 
add hogan.js engine support 
--view «engine» add view «engine» support (ejsihbsihjs| jadelpugltwiglvash) (defaults to jade) 
--css «engine» add stylesheet «engine» support (less|stylus|compass|sass) (defaults to plain css) 
--git add .gitignore 
--force force on non-empty directory 


图 6.13 ”查看 Express 版 本 号 和 帮助 


CR 如 果 不 是 从 头 新 建 Express 项 目 ， 而 是 想 要 在 已 有 的 Node 项 目 中 添加 Express， 可 以 使 用 npm install expbress--save 命 令 ， 但 是 使 用 Express 应 用 生成 器 的 更 大 好 处 是 自动 生成 了 项 目的 模板 代码 。 


(3) 好 了 ， 现 在 就 可 以 使 用 express 命 令 快 速 创 建 服务 端 项 目 了 ， 命 令 如 下 : 


express --ejs Server // 新 建 Server 项 目 ， 并 使 用 ejs 模板 引擎 


此 时 ，express 命 令 会 自动 新 建 Server 项 目 ， 并 且 生 成 如 下 文件 : 


create : Server 

create : Server/package.json 
create : Server/app.js 

create : Server/public 

create : Server/public/images 
create : Server/public/javascripts 
create : Server/routes 

create : Server/routes/index.js 
create : Server/routes/users.js 
create : Server/public/stylesheets 
create : Server/public/stylesheets/style.css 
create : Server/views 

create : Server/views/index.ejs 
create : Server/views/error.ejs 
create : Server/bin 

create : Server/bin/www 


项 目 成 功 创建 后 ， 还 会 提示 如 何 安装 依赖 和 运行 项 目 ， 如 图 6.14 所 示 。 


(4) 按照 提示 安装 依赖 ， 命 令 如 下 : 


cd Server 
npm install 


(5) 安装 完 依赖 包 后 ， 就 可 以 运行 基于 Express 框 架 的 服务 器 了 ， 命 令 如 下 : 


npm start 


此 时 ， 效 果 如 图 6.15 所 示 。 


install dependencies: 
$ cd Server && npm install 


run the app: 
$ DEBUG=server:* npm start 


图 6.14 ”提示 如 何 安装 依赖 和 运行 项 目 


Server npm start 


> server@0.0.0 start /Users/ma Server 


> node ./bin/www 


I 


A615 ”运行 Server 项 目 


e T 和 6.1.4 节 Node.js 开 发 流程 中 使 用 HTTP 模 块 创 建 的 服务 器 例子 一 样 ， 这 里 也 使 用 了 npm start 命 令 。 
(6) 打开 浏览 器 访问 地 址 ， 就 可 以 看 到 Express 页 面 了 ， 如 图 6.16 所 示 。 
A 是 使 用 Express 应 用 生成 器 生成 的 项 目 ， 默 认 使 用 3000 端 口 ， 如 果 想 要 修改 端口 号 的 话 ， 可 以 在 运行 项 目的 时 候 添 加 PORT 参数 PORT=8888npm start， 重 新 运行 项 目 ， 此 时 监听 的 端口 号 就 是 指 


定 的 端口 8888， 效 果 如 图 6.17 所 示 。 


Express X 
€ Q (Y | @ localhost:3000 


Express 


Welcome to Express 


[ Express x 


€ C A | © localhost:8888 


Express 


Welcome to Express 


17 配置 Servetr 项 目 端口 号 


2. Express 项 目 结构 


现在 回头 审视 下 刚才 新 建 的 Server 项 目 。 使 用 Atom 编 辑 器 打开 Server 项 目 ， 效 果 如 图 6.18 所 示 。 


图 6.18 Servers E 2534 


Lis Node 开 发 常用 的 编辑 器 有 WebStorm (https:/ /www.jetbrains.com/webstorm/) «. Visual Studio Code (https://code.visualstudio.com/) . Atom (https://atom.io/) 以 及 Sublime 


Text (https://www.sublimetext.com/) 等 ， 读 者 可 以 根据 自己 的 喜好 选择 习惯 的 编辑 器 开发 Node。 


其 中 ， 各 文件 夹 的 作用 和 说 明 如 表 6.1 所 示 。 


表 6.1 Express 目 录 和 文件 说 明 


目录 /文件 说 明 
bin 可 执行 文件 ， 用 于 配置 和 启动 工程 入 口 文件 
public 静态 资源 目录 
routes 路 由 目录 
views 模板 文件 ， 这 里 使 用 的 是 ejs 模 板 引 擎 


app.js 入 口 文 件 
工程 配置 文件 ， 描 述 了 工程 的 所 有 信息 以 及 第 三 方 库 的 依赖 关系 ， 例 如 ， 刚 
Pe ES 才 初 始 化 的 Server 工 程 依赖 的 Express 版 本 为 4.14.0 


由 于 ， 服 务 端 主要 是 为 React Native 应 用 提供 APl， 所 以 这 里 暂 不 需要 了 解 与 页 面 泻 染 相关 的 目录 或 文件 ， 例 如 views 文 件 夹 ， 本 节 开 发 过 程 中 主要 涉及 的 目录 或 文件 如 下 。 


- public 目 录 : 用 于 存放 图 片 资源 。 
+ toutes 目 录 : 用 于 实现 路 由 API。 
“ app.js 文 件 : 用 于 配置 整个 项 目 ， 包 括 路 由 控制 。 


3. Express 路 由 机 制 


首先 来 了 解 下 设计 和 实现 API 的 基础 : Express 的 路 由 机 制 。 


当 浏 览 器 访问 地 址 http://127.0.0.1:3000/ 时 ,会 看 到 Express 页 面 ， 此 时 浏览 器 向 服务 器 发 送 了 如 下 请 求 ， 如 图 6.19 所 示 。 


(x 4] Elements Console Sources Network Timeline Profiles » ! x 


OQ G me y View: = = OC Preservelog Disable cache | C) Offline No tl 


Fer ]O Regex C Hide data URLS 


(T) XHR JS CSS Img Media Font Doc WS Manifest Other 


| 200ms 400ms 600ms 800ms 1000ms 
Name X Headers Preview Response Cookies Timing 

|_| localhost v General 

[| style.css Request URL: http://localhost:3000/styleshee 


ts/style.css 

Request Method: GET 

Status Code: @ 200 OK 
Remote Address: [::1]:3000 


v Response Headers view source 
Accept-Ranges: bytes 
Cache-Control: public, max-age=0 
Connection: keep-alive 
Content-Length: 111 
Content-Type: text/css; charset=UTF-8 
Date: Wed, 18 Jan 2017 02:10:54 GMT 
ETag: W/"6f-159af431818" 
Last-Modified: Wed, 18 Jan 2017 01:48:47 
GMT 
X-Powered-By: Express 


v Request Headers view source 
Accept text/css,x/x;q-0.1 
Accept-Encoding: gzip, deflate, sdch, br 
Accept-Language: zh-CN, zh; q=0.8,en;q=0.6, zh- 
TW;q-0.4 
Cache-Control: no-cache 
Connection: keep-alive 

2 requests | 810B transferred | Fi... Cookie: CNZZDATA1260716016-601849062-148152 


图 6.19 ”访问 Express 首 页 时 的 HTTP 请 求 头 


Baz: 在 Chrome 浏 览 器 中 ， 打 开 菜单 “视图 ”一 “开发 者 ”一 “JavaSctipt 控 制 台 ”， 选 择 Network 选 项 后 单 击 localhost 请 求 ， 就 可 以 看 到 HTTP 请 求 的 详细 信息 。 需 要 注意 的 是 ， 不 同 浏览 器 的 打开 方 
式 可 能 有 细微 差别 。 


服务 器 在 接收 到 浏览 器 访问 地 址 http://127.0.0.1:3000/ 的 GET 请 求 后 ， 由 app.js 文 件 中 的 这 段 代码 进行 处 理 : 


01 // 这 里 省 略 了 其 他 无 关 的 代码 

02 

03 var index = require('./routes/index'); 

04 var users = require('./routes/users') ; 

05 

06 var app = express(); 

07 

08 app.use('/', index); // 路 由 " /" 路 径 的 请 求 
09 app.use('/users', users); // 路 由 users; 路 径 的 请 求 


11 // 这 里 省 略 了 其 他 无 关 的 代码 


此 时 “/” 路 径 的 请 求 就 交 由 ./routes/index.js 文 件 来 处 理 ，index.js 文 件 的 代码 如 下 : 


01 var express = require('express'); 


02 var router = express.Router(); 

03 

04 /* GET home page. */ 

05 router.get('/', function(req, res, next) ( 

06 res.render('index', { title: 'Express' }); 
07 n; 

08 

09 module.exports = router; 


router 的 get 方 法 用 来 处 理 GET 请 求 ， 该 方法 的 回调 函数 处 理 和 返回 HTTP 响 应 res，res 的 render () 方法 用 来 泻 染 模板 文件 Index.ejs， 模 板 文件 index.ejs 的 内 容 如 下 : 
01 <!DOCTYPE html» 

02 <html> 

03 <head> 

04 <title><%= title %></title> 

05 <link rel='stylesheet' href-'/stylesheets/style.css' /> 
06 </head> 

07 «body» 

08 <h1><%= title %></h1> 

09 <p>Welcome to <%= title %></p> 

10 </body> 

11 </html> 


在 泻 染 模板 文件 时 ， 会 将 模板 中 的 <%=title%> 蔡 换 成 render () 方法 中 传递 的 字典 {title: “Express'}。 最 终 ， 演 染 模板 文件 后 得 到 的 HTML 页 面 就 返回 给 浏览 器 ， 内 容 如 下 : 


<!DOCTYPE html» 
«html» 
«head» 
<title><%= title %></title> 
<link rel='stylesheet' href-'/stylesheets/style.css' /> 
</head> 
<body> 
«hl»Express«/hl» 
<p>Welcome to Express </p> 
</body> 
</html> 


6.32 ”查询 商品 接口 


在 清楚 Express 路 由 控制 和 页 面 泻 染 的 过 程 后 ， 就 可 以 按照 之 前 的 设计 来 添加 我 们 的 商品 AP1 了 。 在 正式 添加 之 前 ， 不 知道 读者 是 不 是 会 好 奇 ， 想 看 一 下 此 时 在 浏览 器 中 访问 地 


址 http://127.0.0.1:3000/products 返 回 的 结果 ， 效 果 如 图 6.20 所 示 。 


[4 localhost:3000/products x 


c— Q {t | © localhost:3000/products 


Not Found 


Error: Not Found 


w 


6.20 404Not Found 错 误 


由 于 不 存在 /products 的 路 由 规则 ， 所 以 服务 器 会 在 响应 头 中 返回 404Not Found 错 误 。 
1. 添加 接口 


下 面 就 来 添加 /products 的 路 由 规则 。 参 考 之 前 路 径 “/” 的 实现 ， 首 先 在 appjs 文 件 中 修改 代码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 
03 var index = require('./routes/index'); 
04 var products = require ('./routes/products'); 
// 8| X./routes/products. js 文件 
05 var users = require('./routes/users'); 
06 
07 var app = express (); 
08 
09 app.use('/', index); T 
10 app.use('/products', products); // 添加 /products 路 径 的 请 求 
11 app.use('/products/:id', products); // 添加 /products/ (.*) 路 径 的 请 求 
12 app.use('/users', users); 
13 


14 // 这 里 省 略 了 没有 修改 的 代码 


然后 ， 在 routes 目 录 下 新 建文 件 products.js， 并 添加 代码 如 下 : 


01 var express = require('express'); 
0 


2 var router = express.Router(); 

03 

04 /* GET products page. */ 

05 router.get('/', function(req, res, next) ( 
06 res.send(" 商 品 列表 ') ; 

07 D; 

08 

09 module.exports = router; 


这 里 并 没有 使 用 响应 res 的 render () 方法 ， 而 是 使 用 了 更 简便 的 send () 方法 : 该 方法 直接 返回 一 个 字符 串 。 此 时 在 浏览 器 中 访问 地 址 http://127.0.0.1:3000/products， 效 果 如 图 6.21 所 示 。 


至 此 ， 商 品 API 就 已 经 算是 正式 上 线 了 ! 
2. 添加 数据 


下 面 接着 添加 数据 ， 并 且 按 照 本 书 6.2 节 RESTful API 的 设计 实现 各 种 操作 的 接口 就 可 以 了 。 


首先 将 图 片 资源 复制 至 public/images 目 录 下 ， 效 果 如 图 6.22 所 示 。 


门 localhost:3000/products x 


Q 1} |© localhost:3000/products 


— 
商品 列表 


6.21 浏览 器 请 求 /products 地 址 


ae. 


OT) 


图 6.22 ”添加 图 片 资 源 到 public/images 


j 9 代码 如 下 : 
t Native 应 用 中 使 用 的 商品 数据 都 添加 到 服务 器 中 ， 修 改 productsjs 文 件 的 
然后 将 React Native 


ct-image-01.jpg', 


-image-01.jpg', 


16 // 这 里 省 略 了 重复 的 代码 

17 } 

18 id: 10, 

19 image: '/images/product-image-01.jpg', 
20 title: ' 商 品 10'， 

21 subTitle: ' 描 述 10' 

22 } 

23 1; 

24 

25 /* GET products page. */ 

26 router.get('/', function(req, res, next) { 

27 res.send(JSON.stringify(products)); // 此 时 返回 JSON 格 式 的 数据 
28 D; 

29 


30 module.exports = router; 


在 上 述 代码 中 ， 使 用 了 JSONL.stringify 将 products 字 典 转换 成 了 JSON 格 式 。 那 么 ，JSON 格 式 又 是 什么 呢 ? ISON (JavaScript Object Notation) 是 一 种 由 道格拉斯 . 克 罗 克 福特 
(https;//zh.wikipedia.org/wiki/?6E99681969396E696A096BC96E6968B968996E6969696AF96C296B796E59685968B96E 796BE968596E59685968B96E796A6968F96E7968996B9) 设计 的 轻 量 级 数据 交换 语言 ， 
文字 为 基础 ， 易 于 让 人 阅读 。 尽 管 JSON 是 JavaScript 的 一 个 子 集 ， 但 发 展 至 今 JSON 数 据 格 式 已 与 语言 无 关 ， 目 前 很 多 编程 语言 都 支持 JSON 格 式 数据 的 生成 和 解析 。JSON 的 官方 MIME 类 型 是 
application/json， 文 件 扩展 名 是 ,json。 


JSON 的 数据 结构 主要 有 以 下 几 种 。 

“对象 (object) : 一 个 对 象 以 “{” 开 始 并 以 “} ”结束 ， 一 个 对 象 包含 一 系列 键 - 值 对 ， 每 个 键 - 值 对 之 间 以 “，” 隔 开 。 
: 键 - 值 对 (collection) : 键 - 值 对 之 间 使 用 “: ” 隔 开 ， 形 如 {name: value]. 

+ 数组 (Array) : 一 个 或 者 多 个 值 用 “，” 分 区 后 ， 使 用 “[” 和 “]” 括 起 来 就 形成 了 数组 ， 形 如 [collection，collection]。 
“ 字符 串 : 以 " 括 起 来 的 一 串 字 符 。 

didi: 一 系列 0 一 9 的 数字 组 合 ， 可 以 为 负数 或 者 小 数 。 

“ 布尔 值 ; 可 以 为 true 或 者 false。 


综 上 所 述 ，JSON 数 据 格式 因为 简单 、 易 读 以 及 体积 小 而 逐渐 受到 Web 开 发 者 的 青睐。 


此 时 ， 再 次 在 浏览 器 中 访问 地 址 http://127.0.0.1:3000/products， 效 果 如 图 6.23 所 示 。 


[3 localhost:3000/products x 林 


C QO localhost:3000/products teag 


{"id":1,"image": /images/product-image-01 jpg", "title" :商品 1 ， "SubTitle": 描述 1 )}， 
id :2,"image":" /images/product-image-0! jpg", title :商品 2 subTitle" 3835 2", 
1d":3 image": "/images/product-image-01.jpg", "title": a 5,3" "subTitle" HA3 3 
"id :4,"image" /images/product-image-01 .jpg" title H $54", subTitle" 3838 4), 
"id":5,"image":"/images/product-image-01.jpg","title’:"§ i35 , subTitle" 38385 ), 
‘id":6,"image":"/images/product-image-01 .jpg" "title 商品 ASubTitle 3838 6 ), 
id':7, "image? /images/product-image-01 Jpg’ title" E 457 "subTitle : 描述 7 
id :8,"image"" /images/product-image-01.Jpg title :商品 8，SubfTitle :描述 8 
'id":9,"image":"/images/product-image-01 jpg", "title" 1 aa", "subtitle" 描述 9 小 
‘id":10,"image":"/images/product-image-01 jpg”, "title": "商品 品 10 ,"subTitle": "d v 10")] 


^ 


图 6.23 浏览 器 请 求 /products 地 址 
这 样 ， 商 品 的 查询 接口 就 实现 了 。 


3. HTTP API 调 试 利器 Postman 


下 面 在 继续 实现 其 他 接口 (新建 、 更 新 以 及 删除 商品 ) 之 前 ， 需 要 提醒 读者 的 是 ， 在 实际 Web 开 发 中 ， 一 般 不 使 用 浏览 器 测试 API (测试 页 面 除外 ) ， 而 是 使 用 其 他 更 高 效 的 HTTP 调 试 工 具 ,， 例 如 笔者 
强烈 推荐 的 Postman (https://www.getpostman.com/) ， 如 图 6.24 所 示 。 


POSIMAN 


Developing APIs is hard. 
Postman makes it easy. 


Download the free Postman App: 


€ Maos EE Windows v A Linux v © Chrome 


16.24 HTTP 调 试 工具 Postman 


Postman 不 仅 支 持 所 有 的 桌面 系统 ， 例 如 macOS、Windows 以 及 Linux， 还 提供 了 免费 的 Chrome 揪 件 版 ,读者 可 以 自行 在 Chrome 应 用 商店 中 搜索 下 载 。 读 者 根据 自己 的 实际 情况 ， 选 择 相应 版 本 安 
装 成 功 后 ， 就 可 以 使 用 Postman 来 测试 刚才 实现 的 查询 商品 接口 了 。 


打开 Postman， 在 GET 方 法 的 地 址 栏 中 添加 商品 接口 的 地 址 http://127.0.0.1:3000V/products， 单 击 Send 按 钮 发 起 HTTP 请 求 ， 此 时 ，HTTP 响 应 的 结果 就 显示 在 Body 一 栏 中 。 另 外 ， 为 了 更 美观 地 查看 
返回 的 JSON 数 据 ， 还 可 以 将 数据 格式 设置 成 JJON， 效 果 如 图 6.25 所 示 。 


Runner Import mH Builder x, (e 


No Environment 
http;//localhost:300! x * 


Collections 
GET v http://localhost:3000/products 


C+ 


Authorization 


: "./images/product-image-01. jpg" 
“商品 1 


: "./images/product-image-01. jpg" 
u Lr 
: “描述 2” 


="; "./images/product-image-01. jpg" 
: “商品 3"， 


描述 3"” 


: "./images/product-image-01. jpg" 


图 6.25 ”Postman 发 送 查 询 商 品 请 求 


测试 成 功 后 ， 单 击 Postman 中 的 Save 按 钮 ， 设 置 请 求 名 称 为 “查询 商品 ”， 新 建 Collection 名 称 为 “商品 ”， 效 果 如 图 6.26 所 示 。 


SAVE REQUEST 


Request Name 


Request description (Optional) 


Descriptions support Markdown 


Create new collection 


图 6.26 ”Postman 保 存 HTTP 请 求 的 配置 


设置 完毕 后 ， 单 击 Save 按 钮 就 可 以 保存 查询 商品 的 HTTP 配 置 了 。 


当然 ，Postman 不 仅仅 只 是 让 显示 数据 更 美观 而 已 ， 它 的 功能 非常 强大 ， 包 括 : 
“ 配置 HTTP 请 求 参数 (Params) 。 

- 配置 HTTP 请 求 头 (Headers) . 

+ 按照 不 同 格 式 显示 返回 的 数据 Pretty、Raw 以 及 Preview 等 。 

“ 保存 HTTP 请 求 的 配置 便于 自动 化 测试 。 


“保存 的 HTTP 请 求 存储 在 服务 端 ， 可 以 同步 和 分 


Ji 


熟悉 了 Postman 之 后 ， 可 以 大 大 加 快 余下 接口 的 调试 进度 。 


添加 新 建 商品 的 接口 ， 根 据 RESTful API 的 设计 规范 ， 新 建 操作 应 该 使 用 HTTP 的 POST 方法 。 修 改 productsjs 代 码 如 下 : 


01 var express = require('express'); 


02 var router - express.Router(); 

03 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 // 获取 商品 接口 

07 router.get('/', function(req, res, next) { 
08 res.send(JSON.stringify (products)); 
09 DE 

10 

11 // 新 建 商品 接口 

12 router.post('/', function (req, res, next) ( 
13 products = products.concat (req.body); 
14 res.send(JSON.stringify (products)); 
15 n; 

16 

17 module.exports = router; 


新 建 商品 的 接口 使 用 的 是 HTTP 的 POST 方法 ， 在 router.post 的 回调 函数 中 ， 从 HTTP 请 求 的 body 中 取出 商品 数据 ， 然 后 将 新 商品 加 到 商品 数组 中 ， 最 后 返回 新 的 商品 列表 。 


在 Postman 中 模拟 HTTP 的 POST 请 求 。 首 先 需要 配置 HTTP 的 方法 为 POST， 添 加 接口 的 地 址 http://127.0.0.1:3000/products， 单 击 请 求 Body 设 置 选项 为 raw 格 式 为 JSJON， 同 时 添加 新 商品 的 JSON 数 
据 如 下 : 


/product-image-01.jpg", 


Postman 的 配置 如 图 6.27 所 示 。 


impot [i 


D Runner 


Collections 新 建 商品 


po |F + 
POST v 


€ form-data @ x-www-form-uriencoded © raw 


[ 
1 


http://localhost:3000/products 


Body e 


@ binary 


"10 s 


"image": 
"title": 
"subTitle":; 


} 


"id" 


", /images/product-image-@1. jpg", 
"商品 11"， 
"描述 11" 


"image": "/images/product-image-@1. jpg", 


"title": 
'subTitle": 


"商品 1"， 
"描述 1" 


图 6.27 Postman 发 送 新 建 商品 请 求 


使 用 查询 商品 接口 验证 ， 发 现 新 商品 已 经 添加 成 功 ， 如 图 6.28 所 示 。 


m w- 
"image" 
"title" 


"subTitle": 


xr ow 
"image" 
"title" 


"subTitle": 


"/images/product -image-01.jpg", 
" 商 51909" : 
"38 3 10" 


" ./Amages/product - image-01. jpg", 
“商品 11”， 
“描述 11” 


图 6.28 ”验证 新 建 商品 接口 


63.4 ”更 新 商品 接口 


继续 实现 更 新 商品 的 接口 ， 同 理 ， 该 接口 使 用 HTTP 的 put 方 法 。 修 改 productsjs 代 码 如 下 : 
01 var express = require('express'); 

02 var router - express.Router(); 

03 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 // 获取 商品 接口 

07 

08 // 新 建 商品 接口 

09 

10 // 更 新 商品 接口 

11 router.put('/:id', function (req, res, next) { 

12 for (var i = 0; i < products.length; i++) ( 
13 if (products[i].id === parseInt (req.params.id)) ( 
14 products[i] = req.body; 

T5 } 

16 l 

17 

18 res.send(JSON.stringify (products) ) ; 

19 n; 

20 

21 module.exports = router; 


router.put 方 法 的 第 一 个 参数 “/: id" i8 


匹配 包含 该 后 缀 的 路 由 ， 而 Express 的 路 由 机 制 会 将 当前 路 由 的 后 缀 ， 例 如 解析 路 由 /products/11 得 到 的 值 11， 设 置 到 HTTP 请 求 的 参数 中 。 所 以 ， 在 put 方 法 


的 回调 函数 中 ， 可 以 通过 req.params.id 来 获取 1D 值 。 另 外 ， 需 要 注意 的 是 ， 参 数 里 的 值 是 字符 串 类 型 的 数据 ， 所 以 需要 转换 成 整 型 数值 再 进行 比较 。 


在 Postman 中 模拟 HTTP 的 PUT 请 求 ， 首 先 需要 配置 HTTP 的 方法 为 PUT， 添 加 接 


JSON 数 据 如 下 : 


的 地 址 http://127.0.0.1:3000/products/11， 接 着 重 


a 击 请 求 Body 设 置 选项 为 r aw 格式 为 JSON， 同 时 添加 新 商品 的 


"3g" Tf. 

"image": "./images/product-image-01.jpg", 
"title": "商品 11"， 

"subTitle": "更 新 过 的 描述 " 


图 


D 


Postman 的 配置 如 


6.29 所 示 。 


D Runner G 
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更 新 商品 


[=v 
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GET ”查询 商品 @ form-data 


POST 新 建 商品 
PUT 更 新 商品 


查询 商品 接口 


验证 ， 发 现 商 品 信息 已 经 成 功 更 新 ， 如 


Builder 


http://localhost:3000/products/11 


Body € 


@ x-www-form-urlencoded © raw @ binary 


"更 新 过 的 描述 " 


图 6.29 ”Postman 发 送 更 新 商品 请 求 


6.30 所 示 。 


x v 


No Environment 


"id": 10, 
"image": “/images/product-image-@1. jpg", 
"title"; "fj 10", 
"subTitle": “描述 19” 


"4d : 


"image"; "./images/product-image-01.jpg", 


"title": “商品 11”， 


“subTitle": “更 新 过 的 描述 ” 


图 6.30 ”验证 更 新 商品 接口 


使 用 HTTP 的 DELETE 请 求实 现 删 除 商品 的 接口 ， 修 改 products.js 代 码 如 下 : 


01 var express = require('express'); 


02 var router - express.Router(); 

03 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 // 获取 商品 接口 

07 

08 // 新 建 商品 接口 

09 

10 // 更 新 商品 接口 

11 

12 // 删除 商品 接口 

13 router.delete('/:id', function (req, res, next) { 
14 for (var i = 0; i « products.length; i44) ( 
15 if (products[i].id === parseInt (req.params.id)) ( 
16 products.splice(i, 1); 

17 } 

18 l 

19 

20 res.send ("Success"); 

21 n; 

22 

23 module.exports = router; 


在 Postman 中 模拟 HTTP 的 DELETE 请 求 ， 首 先 需要 配置 HTTP 的 方法 为 DELETE， 然 后 添加 接 


Builder 


的 地 址 http: 


http://localhost:3000/products/11 


Body 


Pretty 


Success 


/11。Postman 的 配置 如 


D 


6.31 所 示 。 


使 用 查询 商品 接口 验证 ， 发 现 商品 11 已 经 被 成 功 删 除 ， 如 图 6.32 所 示 。 


dd': 
"image" 
"title" 


"subTitle": 


wy | pt- 
"image" 
"title" 


"subTitle": 


图 6.31 Postman 发 送 删除 商品 请 求 


"/images/product-image-@1. jpg", 
" 商 m9" : 
"描述 9" 


“/images/product-image-@1. jpg", 
"mio", 


“描述 10" 


图 6.32 ”验证 删除 商品 接口 


至 此 ， 获 取 、 新 建 、 更 新 以 及 删除 商品 的 所 有 接口 都 已 经 实现 并 测试 通过 ， 使 


Qu. x 


) 。 


在 6.3 节 中 使 


: XMLHttpRequest; 


+ fetch, 


Dunn 


与 服务 器 交换 数据 并 更 新 部 分 网 页 内 容 。 


如 果 读 者 想 更 深 一 步 了 解 Node 开 发 ， 可 以 参考 Expbtess 官 方 文档 (hu expre 


Node 完 成 了 服务 器 接口 的 开发 之 后 ， 现 在 就 可 以 在 React Native 应 


其 中 ，XMLHttpRequest 一 直 是 Web 开 发 者 的 亲密 助手 ， 当 谈 及 AJAX 技 术 的 时 候 ， 通 常 意思 就 是 


Node 进 行 服务 器 


发 的 工作 也 将 告 一 段落 。 接 下 来 会 继续 回 到 移动 端 开发 中 ， 来 完善 我 们 的 React Native 应 用 。 


cn/) 或 者 GitHub 上 的 其 他 资源 ， 例 如 awesome-nodejs (http oitht 


中 添加 与 服务 器 数据 交互 的 功能 了 。React Native 为 了 实现 网 络 交互 的 功能 ,提供 了 如 下 两 种 API。 


于 XMLHttpRequest 的 AJAX。XMLHttpRequest 的 


法 如 下 。 


AJAX (Asynchronous JavaScript And XML 即 异步 JavaScript 和 XML) 不 是 一 门 新 的 开发 语言 ， 而 是 一 种 基于 已 有 技术 和 标准 的 新 方法 。 其 最 大 的 优点 是 可 以 在 不 重新 加 载 整个 页 面 的 情况 下 ， 


01 var request - new XMLHttpRequest () ; 

02 request.onreadystatechange = (err) => ( 

03 if (request.status === 200) ( 

04 console.log('success', request.responseText); 
05 } eise { 

06 console.warn('fail'); 

07 } 

08 n 

09 

10 request.open('GET', 'http://127.0.0.1:3000/"); 


11 request.send(); 


但 是 XMLHttpRequest 不 符合 关注 分 离 (Separation of Concerns) 的 原则 ， 配 置 和 调 


友好 。 


a 


Promise 是 一 套 异 步 操 作 的 处 理 机 制 ， 可 以 消除 “回调 人 金字塔 ”， 即 Callback Hell ( callbacl 


方式 也 比较 混乱 ， 而 且 基 于 


件 的 异步 模型 写 起 来 也 没有 现代 的 Promise、generator/yield 以 及 async/await 


因此 W35C 提 出 了 蔡 代 XMLHttpRequest 的 新 接口 fetch。 相 比 XMLHttpRequest 来 说 ，fetch 是 一 个 封装 程度 更 高 的 网 络 AP1， 而 且 fetch 对 于 网 络 的 异步 处 理 完全 基于 Promise，API 更 加 简洁 友好 。 


lLcom/) 问题 ， 并 且 更 容易 控制 异步 操作 的 执行 顺序 。 


使 用 fetch 接 口 实现 请 求 服务 器 首页 的 代码 如 下 : 

01 const req = new Request('http://127.0.0.1:3000/', (method: 'GET']); 
02 fetch (req) .then ( (res) => { 

03 return res; 

04 }).then((result, done) => { 

05 console.log ("result = " + JSON.stringify (result) ); 

06 if (!done) { 

07 console.log("sucess") ; 


08 } else { 


09 console.warn('fail'); 


6.5 App 从 服务 器 获取 数据 


在 了 解 完 AJAX/fetch 的 概念 和 用 法 之 后 ， 就 可 以 使 用 fetch 接 口 为 React Native 应 用 添加 网 络 功能 


(1) 先 创建 React Native 项 目 并 安装 依赖 包 。 


react-native init ch05 // 新 建 React NativeJi H ch05 
cd ch05 
npm install 


(2) 将 ch04 项 目 中 如 下 目录 或 文件 都 复制 到 ch05 文 件 夹 中 。 


* app.js; 

+ detail.js; 

* home.js; 

+ images; 

+ index.android.js; 
+ index.ios.js; 

: main.js; 

+ more.jse 


(3) 安装 第 三 方 依赖 包 NativeBase、react-native-vector-icons 以 及 react-native-swiper， 命 令 如 下 : 


npm install native-base --save 
react-native link react-native-vector-icons 
npm install react-native-swiper --save 


iis : 如 果 安 装 NativeBase 时 发 生 找 不 到 依赖 react-native-vector-icons 的 错误 (如 图 6.33 所 示 ) ， 需 要 安装 teact-native-vectot-icons 依 赖 包 ， 使 用 命令 npm install react-native-vector-icons - save 即 可 。 


» ch@5 npm install native-base --save 
ch0560.0.1 /Users/yuanlin/ch05 
ļ-r native-base69.5.22 


| |-- blueimp-md562.6.0 

| l-- clampé1.0.1 

| ļ-r color@@.11.4 

| I-T color-convert61.9.0 
| | | 1- color-name@1.1.1 
| | à — color-stringe0.3.0 
| ļ}-- lodash@4.11.2 

| I-- react-native-checkbox@1.@.17 

| I-- react-native-easy-grid690.1.8 

| L— react-native-keyboard-aware-scroll-viewe9.2.0 

bee react-native-vector-icons8-4.0.0 


npm WARN native-base60.5.22 requires a peer of react-native-vector-icons&-4.0.0 but none was installed. 


图 6.33 ”安装 NativeBase 错 误 


(4) 修改 index.iosjs 和 index.androidjs 中 的 代码 如 下 : 


01 import React, (Component) from 'react'; 

02 import (AppRegistry) from 'react-native'; 

03 import app from './app'; 

04 

05 AppRegistry.registerComponent('ch05', () => app); // 修改 第 一 个 参数 为 'ch05' 


此 时 ， 使 用 命令 react-native run-ios 或 者 react-native run-android 运 行 ch05 项 目 ,确保 ch04 项 目的 实现 成 功 移植 到 ch05 项 目 中 ， 效 果 如 | 


6.34 所 示 。 


网 
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图 6.34 ch05 项 目 运行 效果 


65.1 获取 商品 信息 
准备 工作 完毕 后 ， 就 可 以 修改 代码 添加 功能 了 。 
1. 获取 网 络 数据 


首先 ， 在 homejs 文 件 中 添加 获取 网 络 数据 的 代码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 
02 


03 const SERVER URL = 'http://localhost:3000/'; 

04 const PRODUCT API - 'products/'; 

05 

06 export default class home extends Component { 

07 // 这 里 省 略 了 没有 修改 的 代码 

08 

09 componentDidMount() { 

10 this. fetchProducts () 7 

Td } 

12 . 

13 // 这 里 省 略 了 没有 修改 的 代码 

14 

15  fetchProducts = () => ( 

16 const req = new Request(SERVER URL + PRODUCT API, (method: 
'GET!]); 

dr console.log('request: ', SERVER URL + PRODUCT API); 

18 fetch(req).then((res) => ( 

19 return res.json(); // 将 返回 的 数据 转换 成 JSON 格 式 

20 }).then((result, done) => { 

21 if (!done) { 

22 console.log('result: ' + JSON.stringify (result)); 

23 } 

24 E 

25 } 

26 } 


Cus. 应 用 要 想 从 服务 器 成 功 获取 数据 ， 首 先 必须 要 启动 服务 器 程序 ， 可 以 打开 一 个 新 的 终端 ， 进 入 前 面 开 发 的 Server 项 目 中 ， 使 用 npm start 命 令 启动 服务 。 


重新 加 载 应 用 ， 然 后 打开 调试 选项 Debug JS Remotely， 此 时 可 以 在 Chrome 浏 览 器 的 调试 终端 看 到 打印 信息 如 图 6.35 所 示 。 


[x OJ Elements Console Sources Network Timeline Profiles Application Security Audits : 
© w top vw (^) Preserve log Show all messages 
Console was cleared debugger-ui:94 
@ Running application ch05 ({ RCTLog. js:38 
initialProps = { 
h 


rootTag - 1; 


Running application "ch05" with appParams: {"rootTag":1,"initialProps":{}}. | DEV__ === infoLog.is:17 
true, development-level warning are ON, performance optimizations are OFF 

request: http://localhost:3000/products/ home. js:221 
result: [{"id":1,"image":"/images/product-image-@1. jpg","title":"fii1","subTitle":"H4ik1"}, home.js:22 
{"id":2,"image":"/images/product-image-@1. jpg", "title":"2","subTitle":"#4ik2"}, 
{"id":3,"image":"/images/product-image-01. jpg", "title": "#)43","subTitle":"#aik3"}, 
{"id":4,"image":"/images/product-image-@1. jpg", "title": "商品 4" "subTitle":"#84"}, 
{"id":5,"image":"/images/product-image-01.jpg","title":" 商 品 5","subTitle":" 描 述 5"}， 
{"id":6,"image":"/images/product-image-01.jpg","title":" 商 品 6","subTitle":" 描 述 6"}， 
("id":7,"image":"/images/product-image-01.jpg","title":"8$55:7","subTitle":"38i47"), 
("id":8,"image":"/images/product-image-01.jpg","title":"8$4:8","subTitle":"28i48"), 
{"id":9,"image":"/images/product-image-01. jpg", "title": ")9","subTitle":"H4iz9"}, 

{"id":10," image" :"/images/product-image-@1. jpg", "title": "49.10", "subTitle":"3##10"}] 


图 6.35 ”获取 商品 列表 信息 
至 此 ，React Native 应 用 和 服务 器 的 连接 都 已 经 成 功 建立 起 来 了 ! 
2. 展示 数据 


修改 应 用 的 逻辑 ， 将 从 服务 器 获取 的 数据 展示 到 页 面 上 。 修 改 homejs 代 码 如 下 : 


a // 这 里 省 略 了 没有 修改 的 代码 

03 export default class home extends Component { 

04 constructor (props) { 

05 super (props) ; 

06 this.state = { 

07 // 这 里 省 略 了 没有 修改 的 代码 

08 products: [] // 删除 products 内 容 

10 Hu 

Tt } 

12 

13 // 这 里 省 略 了 没有 修改 的 代码 

15 _renderRow = (product) => { 

16 return ( 

17 <ListItem button onPress={() => { 

18 const {navigator} = this.props; 
19 if (navigator) { 

20 navigator.push ({ 

21 name: 'detail', 


22 component: Detail, 


23 params: { 

24 productTitle: product.title 
25 } 

26 n; 

27 } 

28 }}> 

29 «Thumbnail square size={40} source={{ 

30 uri: SERVER URL + product.image // 设置 Thumbnai1 的 uri 
31 }}/> 

32 <Text>{product.title}</Text> 

33 «Text note>{product.subTitle}</Text> 

34 </ListItem> 

35 ) 7 

36 } 

37 

38 _fetchProducts = () => { 

39 const req = new Request (SERVER_URL + PRODUCT API, {method: 'GET'}); 
40 console.log('request: ', SERVER_URL + PRODUCT API); 

41 fetch (req) .then ( (res) => { n x 

42 return res.json(); 

43 )).then((result, done) => { 

44 if (!done) ( 

45 this.setState((products: result}); // 更 新 products 
46 } 

47 n; 

48 } 

49 } 


jaws 关于 NativeBase 的 详细 介绍 和 使 用 说 明 ， 读 者 可 以 参考 4.5 节 的 内 容 。 


重新 加 载 应 用 ， 待 应 用 获取 网 络 数据 和 图 片 地 址 后 ，React Native 应 用 显示 的 就 是 从 服务 端的 数据 了 ， 效 果 如 图 6.36 所 示 。 


这 里 如 果 不 使 用 NativeBase 的 List 组 件 ， 而 是 使 用 React Native 原 生 的 ListView 组 件 的 话 ， 可 能 会 遇 到 以 下 的 警告 : 


Warning: In next release empty section headers will be rendered.In this release you can use 


效果 如 图 6.37 所 示 。 
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图 6.36 ”应 用 成 功 获取 服务 器 数据 和 图 片 
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(2) Warning: In next release empty section headers 
will be rendered. In this release you can use ‘enable... 


图 6.37 ”使 用 ListView 组 件 时 的 enableEmptySections 警 告 


为 了 解决 这 个 警告 ， 可 以 按照 警告 提示 的 方法 ， 在 ListView 组 件 中 配置 属性 enableEmptySections。 示 例 代码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


03 export default class home extends Component { 
04 // 这 里 省 略 了 没有 修改 的 代码 


06 render() ( 
07 return ( 
08 «View style={styles.container}> 
09 /这 时 局 请 了 没有 修 故 的 代码 
10 «View style={styles.products}> 
11 <ListView dataSource={this.state.dataSource} 
12 onRefresh-(this. onRefresh) 
13 renderRow={this._renderRow} 
14 renderSeparator={this._renderSeperator} 
15 refreshControl={this._renderRefreshControl () } 
16 enableEmptySections={true} 
// 配置 enableEmpty Sections 
TT /> 
18 </View> 
19 </View> 
20 H 
21 } 


23 // 这 里 省 略 了 没有 修改 的 代码 


6.5.2 ”更 新 商品 信息 
为 应 用 成 功 添加 了 第 一 个 获取 商品 的 网 络 接口 之 后 ， 接 着 添加 更 新 商品 的 功能 。 
1. 完善 商品 详情 页 面 


需要 完善 商品 详情 页 面 ， 用 来 显示 和 编辑 商品 信息 。 修 改 detailjs 代 码 如 下 : 


01 import React, (Component) from 'react'; 


02 import (StyleSheet, View, Text, TouchableOpacity) from 'react-native'; 

03 

04 export default class detail extends Component { 

05 render() ( 

06 return ( 

07 «View style={styles.container}> 

08 <TouchableOpacity onPress-(this. pressBackButton.bind 
(this) }> 

09 «Text style={styles.back}> 返 回 </Text> 

10 </TouchableOpacity> 

11 <Text style={styles.text}>id: {this.props.product.id} 
</Text> 

12 <Text style={styles.text}>title: {this.props.product. 
subTitle}</Text> 

13 <Text style={styles.text}>subTitle: {this.props.product. 
subTitle}</Text> 

14 <Text style={styles.text}>image: {this.props.product. 
image}</Text> 

15 </View> 

16 le 

17 } 

18 } 

19 

20 const styles = StyleSheet.create ({ 

21 container: ( 

22 flex: 1, 

23 justifyContent: 'center' 

24 

25 text: { 

26 fontSize: 30 

27 ty 

28 back: { 

29 fontSize: 20, 

30 color: 'blue' 

31 } 

32 D; 


同时 ， 还 需要 修改 传 入 商品 详情 页 面 的 参数 。 修 改 home.js 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 

02 

03 export default class home extends Component { 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 _renderRow = (product) => { 

07 return ( 

08 <ListItem button onPress-(() => ( 

09 const {navigator} = this.props; 
10 if (navigator) ( 

11 navigator.push(( 

12 name: 'detail', 
13 component: Detail, 
14 params: ( 

15 product: product 
16 t 

17 D; 

18 } 

19 }}> 

20 // 这 里 省 略 了 没有 修改 的 代码 

21 </ListItem> 

22 de 

23 } 

24 

25 // 这 里 省 略 了 没有 修改 的 代码 

26 


新 加 载 应 用 ， 然 后 单 击 某 一 商品 ， 即 可 跳 转 到 商品 详情 页 面 ， 效 果 如 图 6.38 所 示 。 


IU: | 

title: 1837 

subTitle: 383^ 

image: /images/product- 
image-O01.jpg 


图 6.38 商品 详情 页 面 原型 


2. 编辑 商品 


实现 了 基本 的 原型 和 流程 之 后 ， 就 可 以 完善 商品 详情 页 面 ， 添 加 编辑 功能 了 。 修 改 detailjs 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 

03 export default class detail extends Component { 

04 constructor (props) { 

05 super (props) ; 

06 this.state = ( 

07 productID: '' + this.props.product.id, 

08 productTitle: this.props.product.title, 

09 productSubTitle: this.props.product.subTitle 

10 } 

11 l 

12 

13, render() ( 

14 return ( 

15 «View style={styles.container}> 

16 // 这 里 省 略 了 没有 修改 的 代码 

17 «View style={styles.line}> 

18 «Text style={styles.text}>ID:</Text> 

19 <TextInput style-(styles.input] 

20 value={this.state.productID} onChangeText={ (text) 
=> { 

21 this.setState((productID: text}); 

22 }}></TextInput> 

23 </View> 

24 <View style={styles.line}> 

25 <Text style={styles.text}>title:</Text> 

26 <TextInput style={styles. input} 

27 value={this.state.productTitle} onChangeText= 
{ (text) => { 

28 this.setState((productTitle: text}); 

29 }}></TextInput> 

30 </View> 

31 <View style={styles.line}> 


32 <Text style={styles.text}>subTitle:</Text> 


33 <TextInput style={styles.input} 


34 value={this.state.productSubTitle} onChangeText= 
{ (text) => { 

35 this.setState ({productSubTitle: text]); 

36 }}></TextInput> 

37 </View> 

38 <View style={styles.line}> 

39 <Text style={{fontSize: 20}}> 

40 image: {this.props.product.image}</Text> 

41 </View> 

42 </View> 

43 Me 

44 } 

45 } 


同时 ,修改 detailjs 文 件 的 样式 和 布局 代码 如 下 : 


01 const styles = StyleSheet.create(( 


02 container: ( 

03 flex: 1, 

04 marginTop: 100 

05 hy 

06 line: { 

07 flexDirection: 'row' 
08 hy 

09 text: ( 

10 width: 100, 

11 fontSize: 20 

12 h 

14 input: ( 

LS flex: 1, 

16 borderColor: 'gray', 
17 borderWidth: 2 

18 ] 

19 // 这 里 省 略 了 没有 修改 的 代码 

20 he 


由 


新 加 载 应 用 ， 然 后 单 击 某 一 商品 ， 此 时 商品 详情 页 面 的 效果 如 图 6.39 所 示 。 
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图 6.39 商品 详情 页 面 


3. 保存 编辑 


系 加 编辑 功能 之 后 ， 接 着 再 添加 一 个 保存 结果 的 “保存 ”按钮 。 修 改 detailjs 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 

03 const SERVER URL = 'http://localhost:3000/'; 

04 const PRODUCT API - 'products/'; 

05 

06 export default class detail extends React.Component { 

a // 这 里 省 略 了 没有 修改 的 代码 

09 render() { 

10 return ( 

11 <View style={styles.container}> 

12 7 这 星 省 略 了 没有 修改 换代 码 

13 «Button title=' 保 存 ' onPress-(this. updateProduct}> 
</Button> 

14 </View> 

15 ) 7 

16 

17 

18 _updateProduct = () => { 

19 const req = new Request (SERVER_URL + PRODUCT_API + this.state. 

productID, { 

20 method: 'PUT', 

21 headers: { // 设置 HTTP 请 求 头 的 数据 格式 为 JSON 

22 'Accept': 'application/json', 

23 'Content-Type': 'application/json' 

24 ) 

25 body: JSON.stringify(( 

26 'id': parseInt (this.state.productID), 

2T 'title': this.state.productTitle, 

28 'subTitle': this.state.productSubTitle, 

29 'image': this.props.product.image 

30 }) 

31 D; 

32 fetch (req) .then ( (res) => { 

33 return res.json(); 

34 J).then((result, done) => { 

35 if (!done) ( 

36 Alert alert (' 保 存 成 功 '，null, null); 

37 ) else { 

38 Alert.alert (' 保 存 失 败 '，null, null); 

39 } 

40 D; 

41 } 

42 } 


编辑 商品 的 描述 ， 修 改 “ 描 述 1” 为 New Description， 然 后 单 击 “ 保 存 ” 按 钮 ， 应 用 会 发 送 更 新 商品 信息 的 HTTP 请 求 ， 请 求 成 功 后 效果 如 图 6.40 所 示 。 


4. 通知 首页 


虽然 更 新 商品 


A640 更 新 商品 信息 


新 获取 商品 列表 


信息 成 功 了 ， 但 是 首页 的 数据 并 没有 更 新 ， 因 此 在 保存 成 功 的 同时 还 需要 通知 首页 重新 获取 商品 列表 。 修 改 homejjs 代 码 如 下 : 


// 这 里 省 陷 了 没有 修改 的 代码 


export default class home extends Component { 


// 这 里 省 略 了 没有 修改 的 代码 


.renderRow = (product) => { 


} 


return ( 
<ListItem button onPress={() => { 
const {navigator} = this.props; 
if (navigator) { 
navigator.push ({ 
name: 'detail', 
component: Detail, 
params: ( 
product: product, 


productUpdated: this. productUpdated 


n; 
} 


// 这 里 省 略 了 没有 修改 的 代码 
</ListItem> 


1)» 


ye 


// 这 里 省 略 了 没有 修改 的 代码 


_productUpdated = () => { 


} 


this._fetchProducts () 7 


在 上 述 home.js 代 码 中 ， 将 home 组 件 中 的 函数 productUpdated () 作为 参数 传递 给 了 detail 组 件 ，detail 组 件 接收 到 上 一 个 组 件 传递 的 函数 后 ， 就 可 以 在 恰当 的 时 机 调 


的 通信 。 


同时 ， 修 改 detailjs 代 码 如 下 : 


该 函数 ， 这 样 就 实现 了 组 件 间 


01 
02 
03 
04 
05 
06 
07 


// 这 里 省 略 了 没有 修改 的 代码 


export default class detail extends React.Component { 


// 这 里 省 略 了 没有 修改 的 代码 


_updateProduct = () => { 


const req = new Request (SERVER_URL + PRODUCT_API + this.state. 
productID, { 
// 这 里 省 略 了 没有 修改 的 代码 
n; 
fetch (req) .then ( (res) => ( 
return res.json(); 
)J).then((result, done) => { 
if (!done) ( 


this.props.productUpdated(); // 通知 home 组 件 商品 信息 


Alert.alert (' 保 存 成 功 '，null, null); 
} else { 

Alert.alert (' 保 存 失败 '，null, null); 
} 


更 新 成 功 


此 时 ， 在 商品 页 面 更 新 商品 信息 成 功 后 ， 返 回 到 首页 ， 发 现 此 时 首页 的 商品 列表 也 已 经 更 新 了 ， 效 果 如 图 


Car 


rier 党 


6.41 所 示 。 
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图 6.41 通知 首页 更 新 商品 信息 


6.5.3 ”新 建 商品 


完成 了 获取 和 更 新 操作 之 后 ， 接 着 实现 剩 下 的 两 个 功能 : 新 建 和 删除 商品 。 


首先 ， 实 现 新 建 商品 的 功能 。 在 商品 详情 页 面 添加 “新 建 ”按钮 ， 修 改 detailjs 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 
02 


03 export default class detail extends React.Component ( 
04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 render() ( 


07 return ( 


08 «View style={styles.container}> 


09 // 这 里 省 略 了 没有 修改 的 代码 

10 «Button title=' 新 建 ' onPress-(this. createProduct}> 
</Button> 

11 </View> 

12 ye 

13 } 

14 

15 _createProduct = () => { 

16 const req = new Request (SERVER_URL + PRODUCT_API, { 

17 method: 'POST', 

18 headers: ( // 设置 HTTP 请 求 头 的 数据 格式 为 JSON 

19 'Accept': 'application/json', 

20 'Content-Type': 'application/json' 

21 hy 

22 body: JSON.stringify(( 

23 'id': parseInt (this.state.productID), 

24 'title': this.state.productTitle, 

25 'subTitle': this.state.productSubTitle, 

26 'image': this.props.product.image 

27 n 

28 D; 

29 fetch (req) .then ( (res) => ( 

30 return res.json(); 

31 J).then((result, done) => { 

32 if (!done) ( 

33, this.props.productUpdated|(); 

34 Alert .alert (' 新 建成 功 '，null, null); 

35 ) else ( 

36 Alert.alert (' 新 建 失败 '，null, null); 

37 } 

38 D; 

39 } 

40 } 


然后 单 击 某 一 商品 进入 商品 页 面 ， 修 改 商 品 ID 为 “11”， 商 品 标题 为 “商品 11”， 商 品 描述 为 “描述 11”， 接 着 ， 单 击 “ 新 建 ” 按 钮 就 新 建 了 一 个 商品 ， 效 果 如 图 6.42 所 示 。 单 击 OK 按钮 关闭 提示 框 
后 ， 返 回 到 首页 ， 滑 动 至 商品 列表 底部 ， 就 可 以 看 到 新 添加 的 商品 11 了 ， 效 果 如 图 6.43 所 示 。 


图 6.42 新建 商品 
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图 6.43 在 首页 查看 新 建 商品 


6.5.4 删除 商品 


同样 ， 为 了 添加 删除 商品 功能 ， 首 先 要 在 商品 详情 页 面 添加 “删除 ”按钮 ， 修 改 detailjs 代 码 如 下 : 


o // 这 里 省 略 了 没有 修改 的 代码 


0 

03 export default class detail extends React.Component { 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 render() { 

07 return ( 

08 «View style={styles.container}> 

09 EST SCOTI UTE 

10 «Button title=' 删 除 ' onPress-(this. deleteProduct)» 

</Button> 

11 </View> 

12 i 

13 } 

14 

15 _deleteProduct = () => { 

16 const req = new Request (SERVER_URL + PRODUCT_API + this.state. 
productID, (method: 'DELETE'}); 

29 fetch(reg).then((res) => ( 

30 return res; // 此 时 返回 的 数据 不 是 JSON 格 式 ， 所 以 不 做 处 理 

31 }).then((result, done) => { 

32 if (!done) { 

33 this.props.productUpdated () ; 

34 Alert.alert (' 删 除 成 功 '，null, null); 

35 } else ( 

36 Alert.alert (' 删 除 失败 '，null, null); 

37 } 

38 he 

39 } 

40 i 


单 击 首页 商品 列表 的 商品 11， 进 入 商品 页 面 ， 然 后 单 击 “ 删 除 ”按钮 ， 此 时 发 送 删除 商品 的 请 求 ， 请 求 成 功 后 效果 如 图 6.44 所 示 。 单 击 OK 按钮 关闭 提示 框 后 ， 返 回 到 首页 ， 滑 动 至 商品 列表 底部 ， 就 可 
以 看 到 商品 11 被 删除 了 ， 效 果 如 图 6.45 所 示 。 


图 6.44 删除 商品 
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图 6.45 在 首页 查看 删除 商品 


至 此 ， 和 服务 器 交互 的 所 有 网 络 接口 都 已 经 实现 了 。 


从 上 述 使 用 Node 开 发 服务 器 和 使 用 React Native 开 发 应 用 的 过 程 中 ， 想 必 读 者 已 经 感受 到 了 JavaScript 语 言 的 强大 ， 不 仅仅 实现 了 移动 端的 跨 平台 开发 ， 还 解决 了 前 后 端 “ 跨 端 ” 的 开发 问题 。 当 然 ， 
这 不 仅 要 归功 于 Facebook、Google 类 开放 创新 的 公司 ， 还 应 该 感谢 为 这 些 开源 项 目 做 出 贡献 的 所 有 开发 者 ， 有 了 他 们 的 支持 ， 才 有 了 Node 和 React Native 等 平台 的 快速 发 展 和 和 普及， 在 此 ， 笔 者 再 一 次 
对 他 们 表示 敬意 。 


6.6 ” App 数据 的 本 地 化 存储 


我 们 的 应 用 已 经 具有 了 从 网 络 获取 数据 的 能 力 ， 但 是 如 果 网 络 断 开 怎么 办 呢 ? 为 了 更 好 的 用 户 体验 ， 通 常 在 未 连接 网 络 的 设备 上 打开 应 用 会 显示 上 一 次 获取 到 的 数据 ， 因 此 当 获取 数据 成 功 后 ， 需 要 存 
储 至 本 地 。 下 面 就 来 给 应 用 添加 数据 本 地 化 存储 的 能 力 。 


React Native 开 发 中 常见 的 本 地 数据 存储 的 方法 如 下 。 

- AsyncStorage: React Native 提 供 的 键 - 值 存储 系统 ， 接 口 和 功能 简单 ， 只 能 存储 字符 囊 数据 。 
. SQLite. (heeps://www.sqlite.org/) : 原生 应 用 开发 中 比较 常见 的 数据 存储 方法 。 

- Realm (https://realm.io/) : 一 种 新 兴 的 数据 存储 方法 ， 使 用 简单 但 功能 却 很 强大 。 


- 其 他 : 例如 自 定义 API 使 用 原生 的 存储 方法 、 使 用 Redux (https://github.com/reactjs/redux) 生态 圈 的 本 地 持久 化 实现 redux-persist (https://github.com/rt2zz/redux-persist) o 


6.6.1 AsyncStorage 异 步 键 值 存储 


为 了 实现 数据 储存 ， 可 以 使 用 React Native 提 供 的 APl， 即 AsyncStorage。AsyncStorage 是 一 个 简单 的 、 异 步 的 、 持 久 化 的 键 - 值 存储 系统 ， 对 于 App 来 说 是 全 局 性 的 。 


Asyncstorage 的 常用 接口 有 以 下 几 种 。 

' 设置 键 - 值 对 : setltem (key: string, value: string, callback: (error) ) 。 
- 读 取 键 所 对 应 的 值 : getltem (key: string, callback: (error, result) ) o 
+ 移 除 键 - 值 对 : removeltem (key: string, callback: (error) ) o 

- 清除 所 有 内 容 : clear (callback: (error) ) 。 

- 设置 多 项 键 - 值 对 : multiSet (keyValuePairs, callback: (errors) ) 。 


- 读 取 多 个 键 对 应 的 值 : multiGet (keys, callback: (error, result) ) 。 


这 里 主要 使 用 setltem 和 getltem 两 个 接口 。 


首先 ， 使 用 setltem 来 存储 数据 ， 修 改 home.js 的 代码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 

03 export default class home extends React.Component { 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 _fetchProducts = () => { 

07 const req = new Request(SERVER URL + PRODUCT API, (method: 
'GET!]); 

08 fetch (req) .then ( (res) => { 

09 return res.json(); 

10 ]).then((result, done) => ( 

LT if (!done) { 

12 AsyncStorage.setItem('products', JSON.stringify(result)). 


then((err) => { 
13 if (err) { 


然后 关闭 设备 网 络 或 服务 器 ， 再 重新 发 送 获取 商品 请 求 会 发 生 如 下 警告 : 
Possible Unhandled Promsie Rejection (id: 0): Network request failed 


效果 如 图 6.46 所 示 。 


Warning encountered 1 time. 

Possible Unhandled Promise Rejection (id: 0): 
Network request failed 
onerror@http://localhost:8081/ 
index.ios.bundle? 
platform=ios&dev=true&minify=false: 
31548:21 
dispatchEvent@http://localhost:8081/ 
index.ios.bundle? 
platform=ios&dev=true&minify=false: 
10628:19 
setReadyState@http://localhost:8081/ 
index.ios.bundle? 
platform=ios&dev=true&minify=false: 
33749:19 
_didCompleteResponse@http://localhost: 
8081/index.ios.bundle? 
platform=ios&dev=true&minify=false: 
33585:19 
emit@http://localhost:8081/ 
index.ios.bundle? 
platform=ios&dev=true&minify=false: 
9723:28 

. callFunction@http://localhost:8081/ 
index.ios.bundle? 
platform=ios&dev=true&minify=false: 


图 6.46 ”关闭 设备 网 络 或 服务 器 后 发 起 获取 商品 请 求 


因为 没有 对 Promise 在 网 络 请 求 失败 时 的 异常 做 捕获 和 处 理 。 修 改 home.js 代 码 ， 添 加 Promise 的 异常 处 理 如 下 : 


// 这 里 省 略 了 没有 修改 的 代码 


export default class home extends React.Component { 


// 这 里 省 略 了 没有 修改 的 代码 


_fetchProducts = () => { 
const req = new Request (SERVER_URL + PRODUCT API, {method: 
'GET'}); ~ E 
fetch (req) .then ( (res) => { 
return res.json(); 
}).then((result, done) => { 
if (!done) { 
AsyncStorage.setItem('products', JSON.stringify (result)). 
then((err) => ( 
if (err) ( 
Alert.alert('err: ' + err, null, null); 
} 
this.setState({products: result}); 
n; 


} 
J).catch((err) => { // Promise 异 常 处 理 
AsyncStorage.getItem('products') .then ( (values) => ( 
this.setState ({ 
products: JSON.parse (values) 
n; 


在 断 开 设备 或 服务 器 的 情况 下 重新 加 载 应 用 ， 效 果 如 图 6.47 所 示 。 
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不 过 这 里 还 有 一 个 可 以 改进 的 


不 到 网 络 图 


地 方 ， 由 于 Image 组 件 的 uri 设 置 的 是 服务 器 地 址 ， 所 以 当 网 络 连接 不 上 时 ， 虽 然 数据 可 以 从 本 地 获取 并 正常 显示 ， 但 是 图 
片 时 加 载 本 地 的 默认 图 片 。 修 改 homejs 代 码 如 下 : 


6.47. 在 Promise 异 常 处 理 中 读 取 本 地 存储 数据 


片 却 显示 不 出 来 。 为 了 更 好 的 体验 ， 可 以 在 获取 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
19 
20 
21 
22 
23 
24 
25 
26 
21 
28 
29 
30 
3b 
32 
33 
34 


super (props); 
this.state = { 


isNetworkValid: false, 


export default class home extends React.Component { 
constructor (props) { 


// 这 里 省 略 了 没有 修改 的 代码 


H 
} 


// 这 里 省 略 了 没有 修改 的 代码 


renderRow = (product) => ( 


// 网 络 正常 时 加 载 网 络 图 片 ， 网 络 断 天 


F 时 加 载 本 地 


// 添加 网 络 状态 的 标识 


n 


const imageComponent = this.state.isNetworkValid 
? «Thumbnail square size-(40) source={{ 


uri: SERVER URL + rowData.image}}/> 


: «Thumbnail square size-(40) 


return ( 


source- (require ('./images/product-image-01.jpg') }/>; 


<ListItem button onPress-(() => { 


}}> 


} 


// 这 里 省 略 了 没有 修改 的 代码 


{ImageComponent} 
<Text>{product.title}</Text> 

<Text note>{product.subTitle}</Text> 
</ListItem> 


// 这 里 省 略 了 没有 修改 的 代码 


// 使 用 上 面 创建 的 ImageComponent 


_fetchProducts = () => { 


const req = new Request (SERVER_URL + PRODUCT_API, {method: 


'GET'})7 

fetch (req) .then ( (res) => { 
return res.json(); 

}).then((result, done) => { 
if (!done) { 


AsyncStorage.setItem('products', JSON.stringify (result) ). 


then((err) => { 
if (err) { 


Alert.alert('err: ' + err, null, null); 


} 
this.setState ({ 


isNetworkValid: true, // 设置 网 络 标识 为 true 


products: result 
n; 
n; 
} 
}) .catch((err) => ( 


AsyncStorage.getItem('products').then((values) => ( 


this.setState ({ 
isNetworkValid: false, 
products: JSON.parse (values) 
n; 


// 设置 网 络 标识 为 false 


在 网 络 连 接 时 从 服务 器 获取 数据 和 图 片 资源 ， 网 络 断 开 时 从 本 地 读 取 数据 和 加 载 


Carrier "€ 


Q 搜索 商品 


片 ， 效 果 如 


[ 


6.48 所 示 。 


图 6.48 根据 网 络 状态 加 载 不 同位 置 的 数据 和 图 片 


6.62 ”SQLite 数 据 库 


AsyncStorage 比 较 适 合 存放 较 小 的 简单 数据 ， 如 果 想 要 存放 数据 结构 较 复杂 的 数据 ， 可 以 使 用 移动 平台 常用 的 数据 库 SQLite。 


SQLite (https://www.sqlite.org/) 是 一 个 开源 的 庶 入 式 关系 数据 库 ， 实 现 自 包容 、 零 配置 、 支 持 事务 的 SQL 数据 库 引擎 。 其 特点 是 高 度 便 携 、 使 用 方便 、 结 构 紧 凑 、 高 效 以 及 可 靠 。SQLite 是 原生 应 
用 开发 中 常用 的 数据 存储 方法 ， 在 React Native 开 发 中 ， 可 以 使 用 第 三 方 库 来 支持 SQLite。 本 书 将 以 react-native-sqlite-storage (https://github.com/andpor/react-native-sqlite-storage) 为 例 ， 介 绍 
SQLite 在 React Native 开 发 中 的 使 用 。 


Lus 除了 本 书 介绍 的 react-native-sqlite-storage， 读 者 还 可 以 在 JS.COACH (https://js.coach/react-native) 上 搜索 SQLite 关 键 字 ， 查 找 更 多 的 SQLite 第 三 方 库 。 


首先 ， 添 加 react-native-sqlite-storage 到 React Native 项 目 中 ， 命 令 如 下 : 


npm install --save react-native-sqlite-storage // 安装 第 三 方 库 


Lan: 截止 笔者 完稿 时 ，react-native-sqlite-storage 最 新 版 本 3.1.3 还 不 支持 最 新 的 React Native 版 本 0.40， 所 以 下 面 主要 演示 react-native-sqlite-storage 的 用 法 ， 后 续 版 本 更 新 后 ， 读 者 可 自行 尝试 实际 运行 
效果 。 


要 使 用 SQLite 数 据 库 ， 必 须 实现 打开 和 关闭 数据 库 的 操作 ， 代 码 如 下 : 


01 // 打开 数据 库 

02 db = SQLiteStorage .openDatabase ('product.db', '1.0', 'app-db', -1, () 
=> { 

03 console.log ("DB Opened"); 

04 ), (err) => { 

05 console.log ("SQL Error: " + err); 

06 n; 

07 if (db) ( 

08 db.transaction((tx) => ( 

09 // 创建 数据 库 表 product 

10 tx.executeSql('CREATE TABLE IF NOT EXISTS ' 

'product' 

"(C 


'id INTEGER PRIMARY KEY NOT NULL, ' 
'title VARCHAR, ' 
'subTitle VARCHAR, ' 
‘image VARCHAR" 
Net) D. 
)=>{ 
19 console.log("SQL executed fine"); 
20 }, (err) => { 
21 console.log("SQL Error: " + err); 
22 D; 


m 
一 +++ 二 十 十 十 


24 } 
25 } 


27 // 关闭 数据 库 
28 if (db) ( 

29 console.log("DB Closed"); 
30 db.close(); 


l 
32 db = null; 


在 成 功 打开 数据 库 后 ， 就 可 以 使 用 INSERT 和 SELECT 语句 进行 数据 的 添加 和 查询 操作 了 ， 代 码 实 现 如 下 : 


01  // 插入 数据 

02 if(db) ( 

03 db.executeSql ( 

04 'INSERT INTO ' + productt' (title, subTitle, image) VALUES 


(?,?,2)', 


05 [ "商品 1'， ' 描 述 1'"， 'images/advertisement-image-01.jpg'], 

06 Q => { 

07 console.log("SQL executed fine"); 

08 }, (err) => { 

09 console.log("SQL Error: " * err); 

10 DE 

11 } 

12 

13 // 查询 数据 

14 if(db) ( 

15 db.executeSql ( 

16 'SELECT * FROM ' * 'product', 

17 Ul, 

18 (results) => { 

19 console.log("SQL executed fine " + results); 

20 }, (err) => { 

EA console.log("SQL Error: " * err); 

22 D; 

23 } 

在 使 用 react-native-sqlite-storage 的 过 程 中 可 以 发 现 ，React Native 开 发 中 使 用 的 SQLite 其 实 都 是 基于 原生 平台 SQLite 的 封装 ， 稳 定性 和 开发 效率 并 不 是 很 高 ， 所 以 尽管 原生 应 用 开发 中 常常 使 用 
SQLite， 但 是 在 实际 的 React Native 开 发 中 ， 本 地 的 数据 存储 并 不 推荐 使 用 SQLite 的 方式 。 


那么 有 什么 更 好 的 处 理 复杂 数据 存储 的 办 法 呢 ? 答案 就 是 6.6.3 节 要 介绍 的 主角 Realm。 


6.6.3 ”Realm 数 据 库 


Realm (https://realm.io/) 是 由 Y Combinator 公 司 镶 化 出 来 的 一 款 跨 平 台 移动 数据 库 ， 为 了 彻底 解决 性 能 问题 ， 核 心 数据 引擎 使 


wig 


C++ 打造 。Realm 相 比 SQLite 而 言 更 快 、 更 简洁 、 使 


也 更 加 简 


a Y Combinatot 成 立 于 2005 年 ， 是 美国 著名 创业 名 化 器 ，Y Combinator 扶 持 初创 企业 并 为 其 提供 创业 指南 。 国 内 成 立 于 2009 年 的 创新 工场 ， 就 参考 了 Y Combinator 的 模式 。 


Realm 


现在 已 经 支持 几乎 所 有 的 移动 开发 平台 ， 例 如 iOS、Android、React Native Xamarin, BE 
native/latest/) 为 例 ， 从 开始 安装 到 常用 API 以 及 更 高 级 的 加 密 都 有 详细 介绍 和 示例 。 


+ 


ASA 


使 


Realm， 首 先 还 是 添加 Realm 到 React Native 项 目 中 ， 命 令 如 下 : 


要 的 是 它 提供 了 完善 的 开发 文档 ， 以 Realm 的 React Native 文 档 (https://realm.io/docs/react- 


npm install realm --save // 安装 第 三 方 库 
react-native link realm // 添加 项 目 依赖 


然后 ， 使 
av 第 一 


重新 编译 和 运行 应 


由 | 


react-native run-ios 或 react-native run-android 命 令 重新 编译 和 运行 应 


次 运行 依赖 Realm 的 React Naive 项 目 时 ， 会 下 载 Realm 相 关 的 包 ， 由 于 国内 网 络 环境 的 原 


成 功 后 ， 首 先 创建 Realm 的 实例 ， 创 建 Realm 实 例 时， 需要 描述 数 


居 对 象 的 名 称 、 


01 // 这 里 省 略 了 没有 修改 的 代码 

02 import Realm from 'realm'; 
03 
04 
05 
06 
07 
08 
09 


export default class home extends Component { 
constructor (props) { 
super (props) ; 
this.state = { 
// 这 里 省 略 了 没有 修改 的 代码 
realm: new Realm({ 
schema: [ 


{ 


// 


"Product', 
properties: { 

id: 'int', 

title: 'string', 
subTitle: 'string', 
image: 'string' 


// 
// 


name: 


1) 
HN 


l 
// 这 里 省 略 了 没有 修改 的 代码 


因 ， 下 载 速度 可 能 较 慢 ， 因 此 需要 耐心 等 待 ， 或 者 自行 搜索 加 速 下 载 的 其 他 办 法 。 


属性 等 信息 ， 创 建成 功 后 ， 使 用 该 对 象 就 可 以 进行 数 


居 存 储 操作 了 ， 修 改 homejs 代 码 如 下 : 


创建 Realm 实 例 


数据 对 象 的 名 称 
数据 对 象 的 属性 


然后 ， 继 续 添加 Realm 保 存 和 读 取 数据 的 接口 如 下 : 


export default class home extends Component { 
// 这 里 省 略 了 没有 修改 的 代码 


saveProducts (products) => { 
= this.state.realm.write(() => { 
for (const i = 0; i < products.length; i++) 
const product = products [i]; 
this.state.realm.create('Product', { 
id: parseInt (product.id), 
title: product.title, 
subTitle: product.subTitle, 
image: product. image 


{ 


n; 
} 
_queryProducts = () => { // 使 用 Realm 读 
return this.state.realm.objects ('Product') ; 


} 


最 后 , 使 


替换 之 前 使 


Realm 的 数据 操作 接 | 


01 
02 
03 
04 
05 


export default class home extends Component { 


// 这 里 省 略 了 没有 修改 的 代码 


fetchProducts () => { 
T const req = new Request (SERVER_URL + PRODUCT_API, {method: 
'GET'}); 
fetch (req) .then ( (res) => { 
return res.json(); 
}) .then((result, done) => { 
if (!done) { 
this. saveProducts (result); 


06 
07 
08 
09 
10 


// 使 用 Realm 保 存 商品 数据 


取 商 品 数据 


Asyncstorage 存 储 和 读 取 数 据 的 实现 ， 修 改 homejs 代 码 如 下 : 


11 this.setState ({isNetworkValid: true, 


12 products: result}); 

13 } 

14 }) .catch ( (err) => { 

15 const products = this._queryProducts () ; 
16 console.log ('products: ' + JSON.stringify (products) ); 
d this.setState({isNetworkValid: false, 
18 products: products]); 

19 DE 

20 H 

21 

22 // 这 里 省 略 了 没有 修改 的 代码 

23 } 


在 设备 和 服务 器 网 络 运行 正常 的 情况 下 ， 成 功 获取 商品 数据 后 ， 再 关闭 设备 网 络 或 服务 器 ， 重 新 刷新 应 用 ， 此 时 数据 仍然 可 以 正常 获取 和 显示 。 


至 此 就 实现 了 使 用 Realm 进 行 React Native 应 用 数据 存 取 的 功能 。 当 然 ，Realm 的 功能 和 接口 还 有 很 多 ， 感 兴趣 的 读者 可 以 参考 官方 文档 (https;//realm.io/docs/react-native/latest/) 继续 深入 学 
习 。 


Cus: React Native 上 还 有 一 些 其 他 比较 优秀 的 数据 存储 方案 ,例如 基于 Redux 生 态 圈 的 redux-persist (https://github.com/rt2zz/redux-persist) ， 由 于 Redux 的 内 容 已 经 超出 了 本 书 讨论 的 范围 ， 所 以 读 
者 在 熟练 React Native 基 本 开发 和 技巧 之 后 ， 可 以 自行 继续 学 习 探 索 。 


6.7 小 结 


截止 本 章 ， 我 们 不 仅 掌握 了 React Native 各 种 原生 组 件 、 第 三 方 组 件 ， 还 为 应 用 添加 了 完整 的 网 络 交互 和 数据 存储 的 能 力 ， 这 些 内 容 已 经 可 以 满足 一 个 React Native 应 用 的 基本 开发 需求 。 


但 是 需要 再 次 提醒 读者 的 是 除了 阅读 本 书 ， 读 者 还 需要 反复 地 编码 和 练习 ， 才 能 做 到 从 学 习 知 识 到 掌握 知识 的 晓 变 。 


在 熟练 掌握 这 些 React Native 最 基础 也 是 最 核心 的 内 容 后 ,我 们 将 从 第 7 章 起 ， 进 入 React Native 和 原生 开发 的 “边界 ”， 用 React Native 提 供 的 AP| 为 应 用 添加 更 多 功能 。 


第 7 章 ”常用 React Native API 


在 前 面 的 章节 中 ， 我 们 开发 了 一 个 完整 的 React Native 应 用 ,熟悉 了 各 种 组 件 的 用 法 ,并且 还 使 用 了 很 多 React Native 提 供 的 APl， 包 括 


Alert: 跨 平台 的 提示 框 。 

* AppRegistry: 注册 React Native 应 用 的 入 口 。 

* AsyncStorage: React Native 提 供 的 键 - 值 存储 系统 。 
“ Dimensions: 用 于 获取 设备 的 屏幕 宽 高 。 

“ Platform: 用 于 获取 当前 运行 的 平台 名 称 。 

“ StyleSheet: 提供 了 一 种 类 似 CSS 样 式 表 的 抽象 。 


' 定时 器 : setInterval/clearInterval 创 建 和 销毁 定时 器 。 


那么 ， 除 了 上 述 API 之 外 ，React Native 平 台 还 有 哪些 常用 的 API 呢 ? React Native API 与 组 件 和 原生 接口 又 有 什么 关系 呢 ? 带 着 这 些 疑 问 开始 本 章 的 学 习 React Native API, 


本 章 主要 内 容 有 : 


“ 屏 莫 设 置 相关 API。 
动画 API。 
“ 定义 自己 的 API。 


- 更 丰富 的 特定 平台 使 用 的 API， 如 AlertIOS、AppState 等 。 


7.4 屏幕 设置 相关 API 


在 开发 轮 播 效果 时 : 
“ 为 了 让 轮 播 广告 页 面 的 宽度 占 满 屏幕 ， 使 用 了 Dimensions 来 获取 屏幕 宽度 。 


: 为 了 让 轮 播 广告 每 隔 一 段 时 间 间 隔 滑动 到 下 一 页 面 ， 使 用 了 定时 器 来 定时 更 新 页 面 。 


后 来 在 第 三 方 组 件 的 介绍 中 ， 又 使 用 了 第 三 方 的 轮 播 组 件 react-native-swiper， 但 是 该 组 件 的 实现 原理 仍然 都 是 基于 上 述 APl。 


下 面 同样 通过 几 个 自 定义 组 件 或 模块 的 例子 ， 来 进一步 了 解 React Native API 在 实际 应 用 开发 过 程 中 的 能 力 和 作用 。 


首先 仍然 是 先 创建 React Native 项 目 并 安装 依赖 包 : 


react-native init ch06 // 新 建 React Native 项 目 ch06 
cd ch06 
npm install 


然后 将 ch04 项 目 中 如 下 目录 或 文件 都 复制 到 ch06 文 件 夹 中 。 


Cuz: 这 里 的 ch04 项 目 指 未 使 用 第 三 方 组 件 的 代码 。 如 果 读 者 按照 第 三 方 组 件 的 方法 使 用 git 对 ch04 项 目 代码 进行 版 本 控制 的 话 ， 可 以 先 使 用 git checkout ch04-without-third-party-library 命 令 恢复 到 使 用 
第 三 方 组 件 之 前 的 ch04 项 目 代码 ; 如 果 读 者 没有 使 用 git 进 行 版 本 控制 的 话 ， 也 可 以 手动 编辑 和 恢复 ch04 项 目 代码 。 


“ appjs; 

+ detail.js ; 

+ home.js; 

* images; 

+ index.android.js ; 
* index.ios.js ; 

+ main.android.js ; 
: main.ios.js ; 

: more.jss 


另外 ， 还 需要 修改 index.ios.js 和 index.android.js 中 的 代码 如 下 : 


01 import React, {Component} from 'react'; 


02 import {AppRegistry} from 'react-native'; 

03 import app from './app'; 

04 

05 AppRegistry.registerComponent ('ch06', () => app); // 修改 第 一 个 参数 为 'ch06' 


此 时 ， 使 用 命令 react-native run-ios 或 者 react-native run-android 运 行 ch06 项 目 ,， 确保 ch04 项 目的 实现 成 功 移植 到 ch06 项 目 中 ， 效 果 如 图 7.1 所 示 。 
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图 7.1 ch06 项 目 运行 效果 


7.1.1 获取 屏幕 宽 高 一 -Dimensions API 


在 保证 ch06 项 目 运行 正常 之 后 ， 先 以 获取 手机 屏幕 分 辩 率 为 例 ， 来 看 下 更 多 React Native API 的 用 法 。 首 先 介绍 Dimensions API, 


(1) 新 建 一 个 文件 Screen.js， 用 于 提供 屏幕 宽 高 的 接口 ， 其 中 ， 获 取 屏幕 宽 高 仍然 基于 Dimensions API。 添 加 Screen,js 代 码 如 下 : 


01 import (Dimensions) from 'react-native'; 


02 

03 export default ( 

04 'width' : Dimensions.get ('window') width, 
05 'height' : Dimensions.get ('window') .height 
06 } 


Lia. 这 里 的 Scteen.js 文 件 中 导出 的 是 一 个 普通 的 模块 ， 而 不 是 类 似 home.js 文 件 使 用 extends React.Component 5 PA th React Native 4T 


(2) 使 用 Screenjjs 的 实现 蔡 换 掉 homejjs 文 件 中 的 Dimensions 相 关 代 码 。 修 改 homejs 代 码 如 下 : 


o // 这 里 省 略 了 没有 修改 的 代码 


03 import Detail from './detail'; 
04 import Screen from './Screen'; 
05 
06 export default class home extends Component { 
ud // 这 里 省 略 了 没有 修改 的 代码 
09 render() ( 
10 const advertisementCount - this.state.advertisements.length; 
11 const indicatorWidth = circleSize * advertisementCount + 
circleMargin * advertisementCount * 2; 
12 const left = (Screen.width - indicatorWidth) / 2; 
// 使 用 Screen 替换 Dimensions 
13 return ( 
14 // 这 里 省 略 了 没有 修改 的 代码 
15 ); 
16 } 
17 
18 // 这 里 省 略 了 没有 修改 的 代码 
19 
20 _startTimer() ( 
FAR this.interval = setInterval(() => { 
22 nextPage = this.state.currentPage + 1; 
23 if (nextPage >= 3) { 
24 nextPage = 0; 
25 } 
26 
27 this.setState ({currentPage: nextPage]); 
28 
29 const offSetX = nextPage * Screen.width; 
// 使 用 Screen 替换 Dimensions 
30 this.refs.scrollView.scrollResponderScrollTo((x: offSetX, 
y: 0, animated: true]); 
31 ), 2000); 


32 } 


33 
34 
35 
36 
3T 
38 
39 
40 
41 
42 
43 
44 


// 这 里 省 略 了 没有 修改 的 代码 
} 


const styles = StyleSheet.create ({ 
// 这 里 省 略 了 没有 修改 的 代码 
advertisementContent: ( 
width: Screen.width, // 使 用 Screen 替换 Dimensions 
height: 180 


] 
// 这 里 省 略 了 没有 修改 的 代码 


此 时 重新 加 载 应 用 ， 发 现 首 页 没有 任何 变化 ， 说 明 使 用 Screen 替换 Dimensions 成 功 。 


(3) 使 


“更 多 ”页 面 来 展示 实际 的 屏幕 宽 高 。 修 改 morejs 代 码 如 下 : 


01 import React, {Component} from 'react'; 


import {StyleSheet, View, Text} from 'react-native'; 
import Screen from './Screen'; 


export default class more extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.text}>width: {Screen.width}</Text> 
«Text style={styles.text}>height: {Screen.height}</Text> 
</View> 


} 
const styles = StyleSheet.create ({ 
container: { 
flex: 1, 
justifyContent: 'center', 
alignItems: 'center' 


fontSize: 30 


n; 


重新 加 载 应 用 ， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 屏幕 的 宽 高 分 别 为 375 和 667 (这 里 的 设备 为 iPhone7) ， 效 果 如 图 7.2 所 示 。 
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图 7.2 ”获取 设备 的 屏幕 宽 高 


A MAR: 所 有 iPhone 屏幕 的 详细 尺寸 和 分 辨 率 ， 可 以 参考 该 网 站 的 汇总 The Ultimate Guide To iPhone Resolutions (https:/ /www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) 。 


7.1.2 ”获取 屏幕 分 辨 率 一 PixelRatio API 


获取 屏幕 的 宽 高 ， 我 们 已 经 知道 使 用 Dimensions API。 那 么 ， 如 何 获取 屏幕 的 分 辨 率 呢 ? 


Dus. 屏幕 尺寸 、 屏 幕 分 辨 率 以 及 屏幕 像素 密度 的 详细 介绍 ， 


角 线 上 单位 英寸 内 的 像素 数 。 


可 以 参考 第 5 章 内 容 ， 其 中 ， 屏 幕 尺寸 是 指 手机 屏幕 对 角 线 的 英 十 数 ; 屏幕 分 辨 率 是 指 屏幕 宽 高 像素 数 ; 屏幕 像素 密度 是 指 手机 屏幕 对 


这 里 需要 用 到 一 个 新 的 React Native API: PixelRatio， 用 于 获取 屏幕 缩放 比例 。 通 过 屏幕 宽 高 和 缩放 比例 计算 屏幕 分 辨 率 的 公式 如 下 : 


屏 莫 分辩 率 = 屏幕 宽 高 X 屏 幕 缩 放 比 例 


其 中 ， 常 见 设备 的 屏幕 缩放 比例 如 表 7.1 所 示 。 


屏幕 缩放 比例 
PixelRatio.get() —- 1 
PixelRatio.get() === 1.5 
PixelRatio.get() === 2 


PixelRatio.get() === 3 
PixelRatio.get() === 3.5 


(1) 按照 上 述 公 式 修改 Screen.js 代 码 如 下 : 


ACA 常见 设备 的 屏幕 缩放 比例 
设 ë 

mdpi Android 设 备 
hdpi Android 设 备 
iPhone 4/4S, iPhone 5/5c/5s, iPhone 6/6s, iPhone 7 以 及 xhdpi Android 
设备 
iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus 以 及 xxhdpi Android 设 备 
Nexus 6 


01 import (Dimensions, PixelRatio) from 'react-native'; 


03 export default ( 
04 'width' : Dimensions.get ('window').width, 


05 
06 
07 
08 
09 


'height' : Dimensions.get ('window').height, 
'pixelRatio' : PixelRatio.get(), 


'resolutionx' 
'resolutionY' 


: Dimensions.get('window').width * PixelRatio.get(), 
: Dimensions.get('window').height * PixelRatio.get () 


(2) 在 “更 多 ”页 面 显 示 实 际 的 屏幕 分 辩 率 ， 修 改 morejjs 代 码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 


10 


11 


12 
13 
14 
15 
16 
17 


// 这 里 省 略 了 没有 修改 的 代码 


export default class more extends Component { 


render() ( 
return ( 


} 
// 这 里 省 略 了 没有 修改 的 代码 


«View style={styles.container}> 
«Text style={styles.text}>width: {Screen.width}</Text> 
<Text style={styles.text}>height: {Screen.height}</Text> 
<Text style={styles.text}>pixelRatio: {Screen.pixelRatio} 


</Text> 
<Text style-([styles.text]»resolutionX: (Screen.resolutionX) 
«/Text» 
<Text style={styles.text}>resolutionY: (Screen.resolutionY) 
</Text> 


</View> 


(3) 重新 加 载 应 用 ， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 屏幕 缩放 比例 为 2， 屏 幕 分 辨 率 为 750=375x2、1334=667x2 (这 里 的 设备 为 iPhone7) ， 效 果 如 图 7.3 所 示 。 


(4) 再 验证 一 下 Screen 在 Android 设 备 上 的 运行 效果 (这 里 的 设备 为 Nexus5， 属 于 xxhdpi Android 设 备 ) ， 效 果 如 
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width: 375 

height: 667 

pixelRatio: 2 
resolutionX: 750 
resolutionY: 1334 
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resolutionX: 1080 
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图 7.4 Android 设 备 屏 幕 缩 放 比 例 和 屏幕 分 辩 率 


7.2 动画 Apl 


在 现在 的 移动 应 用 开发 中 ， 流 畅 、 有 意义 的 动画 对 于 用 户 体验 是 非常 必要 的 。 不 输 原生 平台 的 是 ，React Native 也 提供 了 简洁 、 强 大 的 动画 APl。 


+ requestAnimationFrame: 这 个 是 最 简单 也 是 最 “粗暴 ”的 动画 API， 通 过 不 断 改 变 state 的 值 ， 来 实现 组 件 的 动画 效果 。 
: LayoutAnimated: 体验 和 性 能 更 好 ， 适 用 于 全 局 的 动画 配置 ， 实 现 单 个 动画 非常 简洁 方便 。 


: Animated: 最 强大 的 动画 API， 适 用 于 实现 灵活 丰富 的 动画 效果 ， 例 如 多 个 动画 的 组 合 动画 。 


7.2.4 RequestAnimationFrame API 帧 动画 


先 使 用 最 简单 的 requestAnimationFrame APl 来 实现 React Native 动 画 。 


(1) 新 建 Animation.js 文 件 ， 用 于 封装 带 有 动画 效果 的 组 件 ， 添 加 代码 如 下 : 


01 import React, (Component) from 'react'; 
02 import (StyleSheet, View) from 'react-native'; 


04 export default class Animation extends Component ( 

05 constructor (props) { 

06 super (props) ; 

07 this.state = { 

08 width: parseInt (this.props.width), 
09 height: parseInt (this.props.height) 


11 } 


13 render() { 

14 return ( 

15 <View style={[ 

16 styles.animation, { 

17 width: this.state.width, 
18 height: this.state.height 
19 } 

20 ]}></View> 


23 } 


24 

25 const styles = StyleSheet.create ({ 

26 animation: { 

27 backgroundColor: 'red' 
28 } 

29 } 


(2) 在 “更 多 ”页 面 中 显示 该 组 件 ， 修 改 morejs 代 码 如 下 : 


01 import React, (Component) from 'react'; 

02 import (StyleSheet, View] from 'react-native'; 

03 

04 import Screen from './Screen'; 

05 import Animation from './Animation'; 

06 

07 export default class more extends Component { 

08 render() ( 

09 return ( 

10 «View style={styles.container}> 
11 <Animation width='100' height='100'></Animation> 
12 </View> 

13 ) 7 

14 } 

15: } 

16 

17 // 这 里 省 略 了 没有 修改 的 代码 


重新 加 载 应 用 ， 打 开 “ 更 多 ”页 面 ， 效 果 如 图 7.5 所 示 。 


(3) 在 Animation 组 件 中 添加 startAnimation () Bax: 更 新 state 中 width 和 height 的 值 。 修 改 Animation.js 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 

02 

03 export default class Animation extends Component ( 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 componentDidMount() { 

07 this. startAnimation(); 

08 } 局 

09 

10 startAnimation = () => { 

11 T let count = 0; 

12 while (++count < 100) { 

13 requestAnimationFrame(() => ( 
14 this.setState ({ 

15 width: this.state.width + 1, 
16 height: this.state.height + 1 
17 n; 

18 D; 

19 } 

20 } 

21 f 

22 

23 // 这 里 省 略 了 没有 修改 的 代码 


重新 加 载 应 用 ， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 此 时 Animation 组 件 的 大 小 发 生 了 动态 更 新 ， 效 果 如 图 7.6 所 示 。 
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图 7.5 ”Animation 组 件 
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不 过 细心 的 读者 可 能 已 经 发 现 了 ， 使 


中 ， 通 常 还 是 使 


7.2.2 LayoutAnimation API 布 局 动画 


以 下 两 节 介绍 的 动画 APl。 


相 比 requestAnimationFrame，LayoutAnimation API 要 简 生 


智能 得 多 : 


图 7.6 ”使 用 trequestAnimationFrame 实 现 的 动画 


requestAnimationFrame API 实 现 的 动画 效果 比较 生硬 ， 如 果 想 要 实现 “ 淡 入 淡出 


时 ”或 “弹性 动画 ”等 效果 是 比较 困难 的 。 因 


当 组 件 的 布 


局 变化 时 ， 会 自动 将 组 件 运行 到 新 的 位 置 上 。 


使 用 LayoutAnimation API 的 常用 方法 是 调用 LayoutAnimation.configureNext， 然 后 使 用 setState 设 置 组 件 的 


configureNext 函 数 用 于 配置 动画 效果 ， 可 配置 的 选项 如 下 。 


' duration: 动画 时 长 。 


create: 组 件 创建 时 的 动画 。 


属性 。 


此 ， 在 实际 的 React Native 开 发 


"update: 组 件 更 新 时 的 动画 。 


delete: 组 件 销毁 时 的 动画 。 


Lass 读者 也 可 以 通过 查看 React Native 源 码 的 方式 了 解 所 有 的 配置 选项 ， 例 如 ，LayoutAnimation API 的 configureNext () 方法 的 配置 就 定义 在 node_modules/react- 


native/Libraries/LayoutAnimation/LayoutAnimation.js X 4f P © 


create、update 以 及 delete 动 画 的 类 型 定义 如 下 : 


01 type Anim = ( 

02 duration?: number, // 动画 时 长 

03 delay?: number, // 时 间 延 迟 ， 单 位 : 毫秒 
04 springDamping?: number, // 弹跳 动画 阻尼 系数 ， 配 合 spring 使 用 
05 initialVelocity?: number, // 初始 速度 

06 type?: SEnum«typeof TypesEnum>, // 动画 类 型 

07 property?: $Enum<typeof PropertiesEnum»,  // 动画 属性 

08 l 


动画 类 型 type 定 义 在 LayoutAnimation.Types 中 。 
- spring: 弹跳 。 

+ linear: 线性 。 

' easeInEaseOut: BAB HW. 

* easeIn: BA. 


-easeOut: 缓 出 。 


动画 属性 property 定 义 在 LayoutAnimation.Properties 中 。 
' opacity: 透明度。 
*scaleXY: 缩放 。 


在 了 解 完 LayoutAnimation 的 配置 方法 之 后 ， 下 面 来 看 一 看 使 用 LayoutAnimation API| 实 现 的 动画 效果 。 修 改 Animation.js 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 

03 export default class Animation extends Component ( 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 startAnimation = () => ( 

07 al LayoutAnimation.configureNext ({ 

08 duration: 1000, // 持续 时 间 
09 create: ( // 创建 组 件 动画 
10 type: LayoutAnimation.Types.spring, // 弹跳 

11 property: LayoutAnimation.Properties.scalexy, // 缩放 

12 ] 

13 update: { // 更 新 组 件 动画 
14 type: LayoutAnimation.Types.spring 

15 H 

16 ne 

i7 this.setState ({ 

18 width: this.state.width + 100, 

19 height: this.state.height + 100 

20 n; 

2l } 

22 } 

23 


24 // 这 里 省 略 了 没有 修改 的 代码 


重新 加 载 应 用 ， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 此 时 的 Animation 组 件 有 一 个 缩放 效果 的 更 新 ， 结 果 如 图 7.7 所 示 。 
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7.7. 使 用 LayoutAnimation 实 现 的 动画 


Baz: 更 多 的 动画 配置 和 效果 ， 限 于 篇 幅 这 里 就 不 一 一 展示 了 ， 读 者 可 以 自行 尝试 修改 代码 体验 更 多 的 动画 效果 。 


想必 读者 已 经 体会 到 : 使 


LayoutAnimation API 实 现 的 动画 效果 非常 流畅 ， 而 且 动 画 的 过 程 很 柔和 ， 丝 之 没有 生硬 的 感觉 。 同 时 ， 还 可 以 灵活 配置 动画 参数 ， 已 经 能 够 基本 满足 单个 动画 的 需求 。 但 


是 ， 如 果 要 实现 复杂 的 组 合 动画 ， 比 如 先 缩小 50%， 再 向 左 平移 100 像 素 ， 那 么 就 比较 困难 了 ， 需 要 监听 上 一 个 动画 的 结束 事件 ， 再 进行 下 一 个 动画 。 


Cus. configureNext () 第 2 个 参数 是 可 以 监听 动画 结束 的 ， 以 实现 上 述 复杂 的 组 合 动画 的 需求 ， 但 是 该 方法 暂时 只 在 iOS 平 台 有 效 。 


那么 ， 有 没有 一 种 更 加 灵活 丰富 的 API 呢 ? 答案 就 是 下 面 要 介绍 的 内 容 Animated API. 


7.2.3 Animated AP 高 级 动画 


相 比 LayoutAnimation 全 


局 的 动画 配置 ，Animated 使 得 开发 者 可 以 非常 容易 地 实现 各 种 各 样 的 动画 和 交互 ， 同 时 具备 极 高 的 性 能 。 


Animated 仅 关注 动画 的 输入 与 输出 声明 ， 在 其 中 建立 一 个 可 配置 的 


变化 函数 ， 然 后 使 


简 


PüUstart () /stop () 方法 来 控制 动画 按 顺 序 执行 。 


使 用 Animated 最 简单 的 工作 流程 就 是 创建 一 个 Animated.Value， 将 其 绑 定 到 组 件 的 一 个 或 多 个 样式 
一 个 手势 上 ， 例 如 拖 动 或 者 滑动 操作 。 除 了 样式 ，Animated.value 还 可 以 绑 定 到 props 上 。 


Animated 的 动画 类 型 有 以 下 几 种 。 
"spring: 弹跳 。 
timing: 渐变 。 


+ decay: 以 一 个 初始 速度 开始 并 且 逐 渐 减 慢 停止 。 


其 中 ，spring 动 画 的 配置 选项 定义 如 下 : 


属性 上 。 然 后 可 以 通过 动画 驱动 它 ， 例 如 Animated:timing， 或 者 通过 Animated.event 将 其 关联 到 


01 type SpringAnimationConfig = AnimationConfig & { 
02 toValue: number | AnimatedValue | (x: number, y: number) | Animated 
ValueXY, 


03 overshootClamping?: bool, 

04 restDisplacementThreshold?: number, 

05 velocity?: number | (x: number, y: number), // 初始 速度 
06 bounciness?: number, 

07 speed?: number, 

08 tension?: number, 

09 friction?: number, 

10 } 


// 速度 
// 张力 
// 摩擦 力 


Asz 和 上 述 LayoutAnimation API 一 样 ， 读 者 也 可 以 通过 查看 React Native 源 码 的 方式 了 解 所 有 的 配置 选项 ， 例 如 ，Animated 动 画 的 配置 就 定义 在 node_modules/react- 


native/Libraries/ Animated/src/AnimatedImplementation.js 文 件 中 。 


同 理 ，timing 和 decay 动 画 的 配置 选项 可 以 查看 定义 TimingAnimationConfig 和 DecayAnimationConfig。 


Animated 动 画 支 持 的 组 件 有 以 下 几 种 。 


+ Animated.Text; 


* Animated. Image ; 


+ Animated. View. 


1. 弹跳 动画 


仍然 以 弹跳 动画 为 例 ， 下 面 来 看 看 Animated 的 基本 上 


法 。 修 改 Animation.js 代 码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 ] 
24 } 

25 ] }></Animated.View> 
26 
27 
28 
29 
30 
31 
32 
33 
34 


// 这 里 省 略 了 没有 修改 的 代码 


export default class Animation extends Component ( 
constructor (props) { 
super (props) ; 
this.state = { 
width: parseInt (this.props.width), 
height: parseInt (this.props.height), 
bounceValue: new Animated.Value (0) f 
} 


render() { 
return ( 
<Animated.View style-([ // 可 选 的 基本 组 件 类 型 : Image, Text, 
styles.animation, ( 
width: this.state.width, 
height: this.state.height, 
transform: 


f 
} 


scale: 


i 
} 


componentDidMount () { 
this. startAnimation(); 
} 


_startAnimation () => { 
Animated.spring(this.state.bounceValue, 
// 可 选 的 
35 
36 
37 
38 
39 
40 


toValue: 1 
J.startQ; // 开始 执行 动画 


} 
// 这 里 省 略 了 没有 修改 的 代码 


/ 初始 缩放 为 0 


View 


[ // transform 是 一 个 有 序数 组 (动画 按 顺 序 执行 》 


this.state.bounceValue 


{ 
基本 动画 类 型 : spring, decay, timing 


同时 ， 修 改 Animated 组 件 的 宽 高 为 200x200。 修 改 morejs 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


03 export default class more extends Component { 
render() ( 
return ( 
«View style={styles.container}> 
«Animation width='200' height='200'></Animation> 
</View> 


13 // 这 里 省 略 了 没有 修改 的 代码 


网 


重新 加 载 应 


， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 弹跳 的 动画 效果 如 


7.8 和 图 


7.9 所 示 。 
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图 7.8 使 用 Animated 实 现 的 弹跳 动画 1 
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图 7.9 ”使 用 Animated 实 现 的 弹跳 动画 2 


2. 串 行动 画 

当然 ，Animated 能 做 的 动画 远 不 止 这 么 简单 ， 相 比 LayoutAnimation，Animated 还 支持 组 合 动画 。 
"sequence: #47. 

- parallel: 并 行 。 

. stagger: 交错 ， 其 实 就 是 插入 了 delay 的 parallel。 

delay: 组 合 动画 之 间 的 延迟 方法 ， 严 格 来 讲 并 不 算是 组 合 动画 。 

这 么 强大 的 动画 AP1， 想 必 读 者 已 经 迫不及待 要 看 下 它 的 效果 了 。 


首先 ， 来 看 下 串 行 组 合 动画 的 用 法 和 效果 ， 修 改 Animationjjs 代 码 如 下 : 


i // 这 里 省 略 了 没有 修改 的 代码 

03 export default class Animation extends Component { 

04 constructor(props) ( 

05 super (props); 

06 this.state = { 

07 width: parseInt (this.props.width), 

08 height: parseInt (this.props.height), 

09 bounceValue: new Animated.Value(0), 

10 rotateValue: new Animated.Value (0) 

11 } 

12 } 

13 

14 render() { 

15 return ( 

16 <Animated.View style={[ 

17 styles.animation, { 

18 width: this.state.width, 

19 height: this.state.height, 

20 transform: [ // transform 是 一 个 有 序数 组 (动画 按 顺 序 执行 ) 

21 { 

22 Scale: this.state.bounceValue 

23 ly 

24 rotate: this.state.rotateValue.interpolate(( 

25 inputRange: [ 

26 0,1 

27 l; 

28 outputRange: ['0deg', '360deg'] 

29 D 

30 } 

31 ] 

32 } 

33 1)» 

34 XImage source={require('./images/product-image-01.jpg') } 
style={{ 

35 width: this.state.width, 

36 height: this.state.height 

3T ))»«/Image» 

38 </Animated.View> 

39 ) 

40 } 

41 

42 componentDidMount() { 

43 this. startAnimation(); 

44 } 

45 

46 _startAnimation = () => { 

47 Animated. sequence ([ // 串 行动 画 

48 Animated.spring(this.state.bounceValue, {toValue: 1}), 

49 Animated.delay (500), // 串 行动 画 延 迟 时 间 

50 Animated.timing(this.state.rotateValue, { 

51 toValue: 1, 

52 duration: 800, // 持续 时 间 ， 默 认为 500 

53 easing: Easing.out (Easing.quad), // 渐变 函数 

54 }) 

55 }) «start (); // 开始 执行 动画 

56 

57 } 

58 

59 // 这 里 省 略 了 没有 修改 的 代码 


上 述 代码 实现 的 动画 效果 是 先 弹出 动画 ， 然 后 延迟 0.5 秒 钟 ， 最 后 旋转 动画 。 效 果 如 图 7.10 和 图 7.11 所 示 。 
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10 


图 7.10 ”使 用 Animated 实 现 的 串 行动 画 1 


1 
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图 7.11 使 用 Animated 实 现 的 串 行 动画 2 
3. 并 行动 画 


此 外 ， 还 可 以 将 串 行动 画 改 成 并 行动 画 。 修 改 Animationjjs 代 码 如 下 : 


EE // 这 里 省 略 了 没有 修改 的 代码 


03 export default class Animation extends Component ( 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 startAnimation = () => { u 

07 T Animated. parallel ([ // 并 行动 画 

08 Animated.spring(this.state.bounceValue, {toValue: 1}), 

09 Animated.timing(this.state.rotateValue, { 

10 toValue: 1, 

11 duration: 800, // 持续 时 间 ， 默 认为 500 
12 easing: Easing.out (Easing.quad), // 渐变 函数 

13 }) 

14 }) «start (); // 开始 执行 动画 
15 } 

16 } 


7 
18 // 这 里 省 略 了 没有 修改 的 代码 


重新 加 载 应 用 ， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 并 行动 画 效果 如 图 7.12 所 示 。 


图 7.12 ”使 用 Animated 实 现 的 并 行动 画 


至 此 ， 使 用 不 同 React Native 动 画 API 实现 的 Animation 组 件 就 呈现 在 读者 的 面前 了 。 


Dua: 动画 效果 没有 一 个 国定 的 评判 标准 ， 因 此 实际 开发 中 的 动画 效果 是 需要 不 断 摸 索 和 调整 的 ， 在 开发 动画 的 过 程 中 ， 开 发 人 员 需 要 和 设计 师 、 用 户 不 断 沟通 、 改 进 ， 这 样 才 能 获得 更 好 的 用 户 
体验 。 


7.3 组件、React Native API、 原 生平 台 ApPl 
在 之 前 的 章节 中 已 经 接触 并 使 用 了 很 多 的 API 和 组 件 ， 那 么 在 React Native 平 台中 ，API 和 组 件 到 底 有 什么 关系 和 区 别 呢 ? 还 有 原生 平台 的 API 又 是 怎么 回 事 ? 


7.3.1 组 件 和 API 


在 理 清 API 与 组 件 的 关系 和 区 别 之 前 ， 必 须 先 清楚 什么 是 AP1， 什 么 是 组 件 。 


- API (Application Programming Interface) 是 指 应 用 程序 编程 接口 ， 在 React Native-- GE, APIA — EM /b MHF RMAF 69 HHA, AFReact native 平 台 API， 应 用 开发 者 通过 调用 这 些 接口 就 可 以 达到 预期 
的 目的 ， 而 无 须 了 解 React Native 内 部 工作 的 细节 。 例 如 ， 使 用 Dimensions API 可 以 获取 设备 的 屏幕 宽 高 ， 我 们 并 不 用 关心 获取 的 原理 和 过 程 。 


+ 414+ (Component) 是 对 数据 和 方法 的 简单 封装 ， 可 以 理解 为 一 个 组 件 就 是 一 个 对 象 ， 它 可 以 有 自己 的 属性 和 方法 。React Native 应 用 中 ， 所 有 展示 的 界面 都 可 以 看 做 是 一 个 组 件 ， 它 们 只 是 功能 和 训 
辑 上 的 复杂 程度 不 同 。 每 一 个 组 件 都 是 由 许多 小 的 组 件 组 合 而 成 ， 每 个 小 的 组 件 也 有 自己 对 应 的 座 辑 ， 不 过 它们 都 遵循 同样 的 代码 结构 。 例 如 前 面 封装 的 动画 组 件 Animation.js。 


当然 ， 在 组 件 的 内 部 也 可 能 需要 使 用 相关 的 APl。 例 如 ,滑动 的 轮 播 广告 中 实现 的 轮 播 广告 ,使 用 了 setinterval/clearinterval 定 时 器 APl， 以 及 动画 中 封装 的 动画 组 件 Animation， 使 用 了 Animated 
APl 来 实现 动画 效果 。 


综 上 所 述 ， 在 React Native 平 台中 ，API 和 组 件 的 关系 及 结构 如 图 7.13 所 示 。 


React Native 应 用 


JavaScript 桥 接 层 | | React Native 组 件 React Native API 


图 7.13 React Native 中 API 和 组 件 的 关系 和 结构 


7.3.2 API 和 原生 平台 APl 
原生 平台 APl 是 iOS 或 Android 本 身 的 APl， 那 么 React NativeAPI 和 原生 平台 又 是 怎么 交互 的 ? 带 着 这 些 疑问 ， 我 们 还 是 以 Animated API 为 例 来 看 看 能 否 找到 答案 。 


首先 ， 打 开 React Native 中 Animated API 的 相关 源码 node_modules/react-native/Libraries/Animated/src/NativeAnimatedHelper.js 文 件 ， 该 文件 代码 如 下 : 


01 // 这 里 省 略 了 无 关 的 代码 

03 const NativeAnimatedModule = require ('NativeModules') .NativeAnimated 
04 eevee = require ('NativeEventEmitter') ; 

06 // 这 里 省 略 了 无 关 的 代码 


可 以 看 到 ，NativeAnimatedHelperjs 文 件 中 导入 了 NativeModules 和 NativeEventEmitter 模 块 ， 那 么 这 两 个 模块 又 是 干什么 用 的 呢 ? 
- NativeModules: 用 于 JavaScript 代 码 调用 原生 代码 。 
* NativeEventEmitter: 用 于 原生 代码 发 送 消息 到 JavaScript 代 码 。 


由 此 不 难 推断 出 : Animated API 通 过 NativeAnimatedHelper 来 与 原生 平台 通信 ， 它 的 实现 仍然 是 基于 原生 的 。 


通过 Animated API 的 例子 知道 ， 在 React Native 平 台中 ，API 和 原生 接口 的 关系 和 结构 如 图 7.14 所 示 。 


React Native 应 用 


JavaScript 桥 接 层 React Native API 


原生 平台 原生 平台 API 


图 7.14 React Native 中 API 和 原生 接口 的 关系 和 结构 


74 实现 自己 的 Platform API 


为 了 进一步 理解 React Native API 和 原生 接口 的 关系 ， 这 里 以 Platform API 为 例 ， 实 现 一 个 相同 功能 的 APl 来 代替 它 。 


(1) 新 建 Platform.js 文 件 ， 添 加 代码 如 下 : 


01 export default ( 
02 'systemName' : 'unknown' 
03 } 


(2) 在 “更 多 ”页 面 中 显示 Platform.systemName 的 值 ， 修 改 morejs 代 码 如 下 : 


0l // 这 里 省 略 了 无 关 的 代码 


03 export default class more extends Component { 

04 render() ( 

05 return ( 

06 «View style={styles.container}> 

07 «Text style-(styles.text]»(Platform.systemName]«/Text» 
08 </View> 


10 i 
AT } 


13 const styles = StyleSheet.create ({ 
T ZETT See 

15 text: ( 

16 fontSize: 30 

LT i 

18 D; 


(3) 重新 加 载 应 用 ， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 此 时 显示 的 平台 名 称 为 unknown， 效 果 如 图 7.15 所 示 。 
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EJ7.15 Á X X Platform API 初 始 效果 


在 准备 好 模块 的 定义 和 页 面 展示 之 后 ， 就 可 以 专心 开发 与 原生 平台 交互 的 接口 了 。 


741 ”支持 iOS 平 台 


支持 iOSs 平 台 的 接口 设计 步骤 如 下 。 
(1) 对 于 iOS 平 台 ， 使 用 Xcode 打开 ios/ch07.xcodeproj 文 件 ， 然 后 新 建 Platform 类 : 生成 两 个 文件 Platform.m 和 Platform.h， 其 中 Platform.m 是 源 文件 ，Platform.h 是 头 文件 ， 效 果 如 图 7.16 所 
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A716 ”在 iOS 工 程 中 新 建 Platform 类 


(2) 修改 Platform.h 代 码 如 下 : 


01 #import <React/RCTBridgeModule.h> 
02 


03 @interface Platform : NSObject <RCTBridge 
Module> 

04 

05 @end 


其 中 ， 头 文件 RCTBridgeModule.h 和 RCTBridgeModule 是 React Native 平 台 为 开发 者 提供 的 与 原生 平台 通信 的 桥接 实现 。 


(3) 修改 源 文件 Platform.m 代 码 如 下 : 


01 #import "Platform.h" 

02 

03 @implementation Platform 

04 

05 RCT EXPORT MODULE () // 导出 此 原生 模块 供 React Native 接 口 调用 
06 

07 - (NSDictionary *)constantsToExport { : 

08 return @{ // 返回 键 值 对 
09 G"systemName": "ios" 

10 Hu 

11 } 

12 

13 Gend 


Dus. 关于 原生 接口 和 代码 的 更 多 介绍 ， 将 在 后 面 内 容 中 详细 讨论 。 


(4) 最 后 修改 Platform,js 中 的 代码 如 下 : 


01 import {NativeModules} from 'react-native'; 

02 

03 export default ( 

04 'systemName' : NativeModules.Platform.systemName 
05 } 


Carrier F 让 


重新 加 载 iOS 应 用 ， 查 看 “更 多 ”页 面 ， 此 时 显示 的 平台 名 称 就 是 jos 了， 效果 如 图 7.17 所 示 。 
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ios 


图 7.17 iOS 平 台 的 自 定 义 Platform API 


742 支持 Android 平 台 


对 于 Android 平 台 ， 使 用 Android Studio 打 开 android 文 件 夹 ， 然 后 新 建 PlatformModule 类 : 生成 文件 PlatformModulejava， 效 果 如 图 7.18 所 示 。 


v [:com.ch06 
à MainActivity 
ù MainApplication 
à PlattormModule 


b (s Gradle Scripts 


A718 ”在 Android 工 程 中 新 建 PlatformModule 类 


(1) 修改 PlatformModulejava 代 码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自 


动 导 入 所 依赖 的 模块 
02 
03 public class PlatformModule extends ReactContext BaseJavaModule ( 
04 private final ReactApplicationContext mReact Context; 
05 
06 public PlatformModule (ReactApplicationContext reactContext) { 
07 super (reactContext) ; 
08 this.mReactContext = reactContext; 
09 } 
10 
jd GOverride 
12 public String getName() ( 
13 return "Platform"; // 模块 名 称 
14 } 
15 
16 GOverride 
17 public GNullable 
18 Map<String, Object» getConstants() { 
19 HashMap<String, Object» constants = new HashMap<String, Object»(); 
20 constants .put ("systemName", "android"); 
21 return constants; // 返回 键 值 对 
22 } 
23 } 


与 iOS 平 台 导 出 模块 类 似 ，Android 平 台 也 需要 将 PlatformModule 模 块 导 出 供 React Native 接 口 调用 。 


(2) 再 新 建 Platformjava 文 件 ， 并 添加 代码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 
02 

03 public class Platform implements ReactPackage { 

04 GOverride 

05 public List«NativeModule» createNativeModules ( 

06 ReactApplicationContext reactContext) ( 
07 List«NativeModule» modules = new ArrayList<>(); 
08 modules.add(new PlatformModule (reactContext) ) ; 

09 return modules; 

10 } 

11 

12 @Override 

13 public List<Class<? extends JavaScriptModule>> createJSModules() { 


14 return Collections.emptyList(); 


15 } 
TT GOverride 
18 public List«ViewManager» createViewManagers ( 


19 ReactApplicationContext reactContext) ( 
20 return Collections.emptyList(); 


(3) 接着 还 需要 在 MainApplication.java 文 件 中 注册 ， 才 算 正 式 完成 导出 Platform 模块 的 操作 。 修 改 MainApplicationjava 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 
03 public class MainApplication extends Application implements React 
Application ( 
04 
05 private final ReactNativeHost mReactNativeHost = new ReactNative 
Host(this) { 
06 // 这 里 省 略 了 没有 修改 的 代码 
07 
08 GOverride 
09 protected List«ReactPackage» getPackages() ( 
10 return Arrays.<ReactPackage>asList ( 
Tio. new MainReactPackage(), new Platform() 
// 导出 Platform 模块 
12 ) 7 
13 } 
14 B 
15 
16 // 这 里 省 略 了 没有 修改 的 代码 
KE f 
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新 编译 和 运行 Android 应 用 ， 查 看 “更 多 ”页 


， 此 时 显示 的 平台 名 称 就 是 android 了 ， 效 果 如 


7.19 所 示 。 
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67.19 Android 平台 的 自 定 义 Platform API 


至 此 ， 一 个 自 定义 的 跨 平台 Platform API 就 实现 了 。 从 这 个 例子 中 可 以 进一步 了 解 到 React Native API 与 原生 接口 的 关系 : React Native API 


CR 本 节 内 容 涉 及 了 原生 平台 开发 的 部 分 知识 ， 例 如 Xcode 和 Andtoid Studio 工 具 的 使 用 ， 以 及 Objective C 和 Java 编 程 语言 ， 限 于 篇 幅 ， 本 书 没有 详细 介绍 。 


例 即 可 完成 开发 。 当 然 ， 如 果 读 者 感 兴趣 的 话 ， 也 可 以 参考 iDS/Android 开 发 的 相关 书籍 和 教程 。 


7.5 “为 应 用 添加 更 丰富 的 API 


随 着 应 用 的 功能 愈加 完 


- Alert; 


- Animated; 


- AppRegistry ; 


* AsyncStorage ; 


: Dimensions; 


* Easing; 


+ LayoutAnimation ; 


+ PixelRatio; 


+ Platform; 


+ StyleSheet; 


， 所 


到 的 React Native API 也 越 来 越 多 ， 


前 在 电 商 App 中 已 经 


不 过 这 些 只 是 React Native 庞 大 API 的 冰山 一 角 ， 因 此 下 面 再 介绍 一 些 其 他 比较 常用 的 APl。 


7.5.1 ”提示 框 和 编辑 框 一 一 AlertlOS 


迄今 ， 我 们 使 用 的 都 是 跨 平台 APl， 即 同时 支持 iOS 和 Android 平 台 的 APl， 而 还 有 一 类 APl， 那 就 是 只 支持 特定 3 


用 的 API 有 : 


FE 台 的 AP1， 例 如 


“ 只 支持 OS 的 API: ActionSheetIOS、AdSupportIOS、AlertIOS、ImagePickerIOS、PushNotificationIOS 以 及 VibrationIOS 等 。 


- 只 支持 Android 的 API: BackAndroid、DatePickerAndroid、PermissionsAndroid、TimePickerAndroid 以 及 ToastAndroid 等 。 


这 里 先 以 AlertIOS 为 例 ， 来 看 一 看 只 支持 特定 平台 API 的 使 用 。 


于 原生 平台 接 


但 是 请 读者 不 用 担心 ， 按 照 本 书 代码 示 


1. 提示 框 
由 于 不 同 平台 使 用 的 API 不 同 ， 这 里 首先 要 对 ch06 项 目的 代码 做 一 些 调整 。 


(1) 新 建 home.iosjs 和 home.android.js 两 个 文件 ， 将 homejs 文 件 内 容 复制 至 这 两 个 文件 中 后 删除 homejs 文 件 ， 此 时 ，ch06 项 目 结构 如 图 7.20 所 示 。 


detall 
home.android.js 
home.ios.js 
index.android.Js 
Index.ios.|s 
main. 


main.i 


JS 
JS 
" 


7.00 重 构 后 的 ch06 项 目 结构 


a 


(2) 使 用 AlertlOS API 蔡 换 home.ios.js 原 有 的 Alert API。 修 改 home.ios,js 代 码 如 下 : 


: 关于 home.ios.js 和 home.android.js 跨 平台 代码 的 原理 和 机 制 ， 读 者 可 以 参考 4.1.1 节 的 内 容 。 


01 // 这 里 省 略 了 没有 修改 的 代码 

02 

03 export default class home extends Component { 

of // 这 里 省 略 了 没有 修改 的 代码 

06 render() ( 

07 // 这 里 省 略 了 没有 修改 的 代码 

08 return ( 

09 «View style={styles.container}> 

10 // 这 里 省 略 了 没有 修改 的 代码 

11 «View style={styles.searchbar}> 

12 <TextInput style-(styles.input) 

13 placeholder=' 搜 索 商品 ' 

14 onChangeText={ (text) => { 

15 this.setState ({searchText: text}); 

16 }}></TextInput> 

17 <Button style={styles.button} 

18 title=' 搜 索 ' 

19 onPress={() => ( 

20 AlertIOS.alert (' 搜 索 内 容 : ' + this.state. 
searchText, null, null); 

21 }}></Button> 

22 </View> 

23 // 这 里 省 略 了 没有 修改 的 代码 

24 «/Niew» 

25 } 

26 B 

27 

2 // 这 里 省 略 了 没有 修改 的 代码 


: 使 用 AlertIOS API 4b HAlert API， 需 要 在 代码 中 导入 AlertIOS API 并 移 除 Alert API。 另 外 ， 因 为 与 搜索 框 完全 相同 ， 上 述 代码 省 略 了 轮 播 广告 中 Alert 修 改 的 说 明 ， 请 读者 知悉 。 


(3) 重新 加 载 应 用 ， 输 入 要 搜索 的 内 容 ， 例 如 Abc， 单 击 “ 搜 索 ” 按钮 ， 此 时 提示 框 将 显示 输入 框 刚才 输入 的 Abc， 效 果 如 图 7.21 所 示 。 


图 7.21 基于 AlertIOS 的 提示 框 


2. 编辑 框 


细心 的 读者 可 能 会 发 现 : 使 用 AlertIOS 的 提示 框 和 Alert 提 示 框 没有 什么 区 别 ， 而 且 Alert API 又 是 跨 平 台 的 ， 那 么 到 底 AlertlOS API 还 有 什么 用 呢 ? 
“ 如 果 仅仅 显示 一 个 静态 的 提示 框 ， 应 该 使 用 跨 平 台 的 Alert API 
“ 如 果 针 对 iOS 平 台 需 要 提示 用 户 输入 一 些 信息 的 话 ， 可 以 使 用 AlertIOS APL. 

下 面 以 编辑 搜索 结果 的 功能 为 例 ， 来 看 看 AlertIlOS API 的 这 个 “特长 ”。 


(1) 修改 home.iosjs 代 码 如 下 : 


o // 这 里 省 略 了 没有 修改 的 代码 


03 export default class home extends Component { 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 render() ( 

07 // 这 里 省 略 了 没有 修改 的 代码 

08 return ( 

09 «View style={styles.container}> 

10 // 这 里 省 略 了 没有 修改 的 代码 

11 «View style={styles.searchbar}> 

12 <TextInput style={styles. input} 

13 placeholder=' 搜 索 商 品 ' 

14 value={this.state.searchText} 

15 onChangeText={ (text) => { 

16 this.setState({searchText: text}); 
17 }}></TextInput> 

18 <Button style={styles.button} 

19 title=' 搜 索 ' 

20 onPress-(() => ( 

21 AlertlIOS.prompt (' 编 辑 搜索 结果 '，null, 


(promptValue) => { 


22 this.setState({searchText: promptValue]); 
23 }, undefined, this.state.searchText); 
24 }}></Button> 


</View> 
26 // 这 里 省 略 了 没有 修改 的 代码 
27 </View> 
28 } 
29 te 


31 // 这 里 省 略 了 没有 修改 的 代码 


(2) 重新 加 载 应 用 ， 输 入 要 搜索 的 内 容 ， 例 如 Abc， 单 击 “ 搜 索 ”按钮 ， 此 时 会 弹出 提示 框 编辑 输入 刚才 输入 的 Abc， 效 果 如 图 7.22 所 示 。 


(3) 接着 在 编辑 器 框 中 输入 Abcd， 然 后 单 击 OK 按 钮 ， 此 时 搜索 输入 框 中 的 搜索 结果 被 修改 了 ， 效 果 如 图 7.23 所 示 。 
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图 7.23 更 新 搜索 输入 框 


75.2 ”前 后 台 状 态 变 化 一 一 AppState 


AppState API 能 告诉 开发 者 应 用 当前 是 在 前 台 还 是 在 后 人 台 ， 并 且 能 在 状态 变化 的 时 候 发 出 通知 。 基 于 AppState APl， 可 以 在 应 用 从 后 台 进 入 前 台 的 时 候 ， 自 动 刷新 列表 的 数据 ， 以 达到 更 好 的 用 户 体 
验 。 


(1) 在 home.iosjs 文 件 中 导入 AppState API， 修 改 home.iosjs 代 码 如 下 : 


01  // 这 里 省 略 了 没有 修改 的 代码 
02 


03 export default class home extends Component { 

04 constructor(props) ( 

05 super (props) ; 

06 this.state = ( 

07 // 这 里 省 略 了 没有 修改 的 代码 

08 currentAppState: AppState.currentState 
09 } 

10 } 

11 

12 // 这 里 省 略 了 没有 修改 的 代码 

13 

14 componentDidMount() { 

15 this. startTimer(); 

16 AppState.addEventListener('change', this. handleAppStateChange); 
17 } 

18 

19 componentWillUnmount() { 

20 clearInterval (this.interval) ; 

21 AppState.removeEventListener('change', this. handleAppStateChange); 
22 } 

23 

24  handleAppStateChange = (nextAppState) => ( 

25 if (nextAppState === 'inactive' || nextAppState === 'background') { 
26 console.1og(' 应 用 进入 后 台 '); 

27 } else if (nextAppState === 'active') { 

28 console.1o0g(' 应 用 进入 前 台 '); 

29 l 

30 

3T this.setState((currentAppState: nextAppState]); 
32 H 

33 

34 // 这 里 省 略 了 没有 修改 的 代码 

35 } 


在 componentDidMount () 函数 中 ， 注 册 了 AppState 的 回调 handleAppStateChange， 当 AppState 发 生 change 事 件 时 ， 会 调用 注册 的 回调 。 


(2) 重新 加 载 应 用 后 ， 为 了 查看 回调 中 的 打印 信息 ， 首 先 打 开 React Native 调 试 选项 中 的 Debug JS Remotely 选 项 ， 然 后 选择 Chrome 浏 览 器 中 的 Console， 接 着 单 击 home 键 返回 桌面 ， 最 后 重新 打 
开 应 用 。 此 时 ， 就 可 以 看 到 调试 控制 台中 的 打印 信息 ， 效 果 如 图 7.24 所 示 。 


[x àl Elements Console Sources Network Timeline Profiles Application » 1 


© w top v Preserve log Show all messages 
Console was cleared debugger-ui:94 
@ Running application ch06 ({ index.ios.bundle?platform-ios&dev-true&minify-false:31846 
initialProps - 1 
) 
rootTag - 1 
}) 
Running application "ch@6" index.ios.bundle?platform-ios&dev-true&minify-false:28667 
with appParams: {"rootTag":1,"initialProps":{}}. | DEV  --- true, development-level 
warning are ON, performance optimizations are OFF 
O 应 用 进入 后 台 home. ios.js:103 
应 用 进入 前 台 home,ios.js:105 


7.24 React Native 调 试 的 终端 控制 台 


(3) 在 导入 和 理解 了 AppState API 的 使 用 之 后 ， 就 可 以 进一步 优化 代码 : 当 应 用 从 后 台 进入 前 台 的 时 候 ， 获 取 和 刷新 商品 列表 的 数据 。 修 改 home.iosjs 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 
03 export default class home extends Component ( 
"e // 这 里 省 略 了 没有 修改 的 代码 
06 handleAppStateChange = (nextAppState) => { 
07 E if (nextAppState === 'active') { 
08 if (this.state.currentAppState === 'inactive' 
09 || this.state.currentAppState === 'background') { 
10 this. onRefresh(); 
11 } 
12 
13 this.setState ({currentAppState: nextAppState}) ; 
14 } 
15 
tg // 这 里 省 略 了 没有 修改 的 代码 
} 


(4) 重新 加 载 应 用 ， 按 home 键 返回 桌面 ， 然 后 重新 打开 应 用 。 此 时 商品 列表 的 数据 自动 重新 刷新 ， 效 果 如 图 7.25 所 示 。 
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A725 ”应 用 从 后 人 台 进 入 前 台 时 自动 刷新 商品 列表 


7.5.3 ”Android 物 理 “ 返 回 键 ”一 一 BackAndroid 


在 7.5.1 节 中 ， 我们 了 解 了 只 支持 iOS 平 台 的 APl， 下 面 将 介绍 一 个 只 支持 Android 平 台 的 APl: BackAndroid, 


众所周知 ，iOS 设 备 是 没有 物理 返回 按键 的 ， 而 Android 设 备 通常 是 有 返回 按键 的 。React Native 提 供 的 BackAndroid API 就 是 用 来 处 理 返回 按键 的 。 修 改 home.androidjs 代 码 如 下 : 


i // 这 里 省 略 了 没有 修改 的 代码 


03 export default class home extends Component { 

04 // 这 里 省 略 了 没有 修改 的 代码 

05 

06 componentDidMount() ( 

07 this. startTimer(); 

08 AppState.addEventListener('change', this. handleAppStateChange); 

09 if (Platform.OS === 'android') ( 

10 BackAndroid.addEventListener('hardwareBackPress', this. 
onBackAndroig); 

11 j 

12 } 

13 

14 componentWillUnmount() ( 

15. clearInterval (this.interval); 

16 AppState.removeEventListener('change', this. handleAppStateChange); 

17 if (Platform.OS === 'android') { 

18 BackAndroid.removeEventListener ('hardwareBackPress', 
this. onBackAndroig); 

19 } 

20 } 

21 

22 onBackAndroid = () => ( 

23 ul Alert.alert (' 点 击 返 回 按键 '，null, null); 

24 return true; 

25 } 

26 

27 // 这 里 省 略 了 没有 修改 的 代码 

28 } 


在 Android 设 备 上 ， 当 按 “ 返 回 ”按键 时 ， 如 果 没 有 监听 hardwareBackPress 事 件 的 回调 或 者 回调 返回 的 值 不 为 true， 那 么 返回 事件 会 按照 系统 默认 的 方式 进行 处 理 。 而 在 上 述 代码 中 ， 我 们 注册 了 回 
调 ， 该 回调 弹出 提示 框 后 返回 true， 因 此 当 按 “返回 ”按键 时 ， 应 用 并 不 会 返回 到 桌面 ， 效 果 如 图 7.26 所 示 。 


图 7.26 ”使 用 BackAndroid 处 理 “返回 ”按键 
7.5.4 ”日 期 和 时 间 选 择 器 一 一 DatePickerAndroid/TimePickerAndroid 
DatePickerAndroid 和 TimePickerAndroid 都 是 只 支持 Android 平 台 的 APl。 其 中 : 
+ DatePickerAndroid API 会 打开 一 个 标准 的 Android 日 期 选择 器 的 对 话 框 。 
* TimePickerAndroid API 会 打开 一 个 标准 的 Android 时 间 选 择 器 的 对 话 框 。 


同样 ， 由 于 不 同 平台 使 用 的 API 不 同 ， 这 里 首先 要 对 ch06 项 目的 代码 做 一 些 调整 。 新 建 more.iosjs 和 more.androidjjs 两 个 文件 ， 将 morejs 文 件 内 容 复制 至 这 两 个 文件 后 删除 morejjs 文 件 ， 此 时 ch06 项 
目 结构 如 图 7.27 所 示 。 


home.ios.js 


index. 


index.ios. 


main.androi 


Js 
JS 
JS 
m 
m 
m 
Js 


67.27 重 构 后 的 ch06 项 目 结构 


首先 ,在 “更 多 ”页 面 添加 显示 日 期 的 文本 和 “日 期 选择 器 ”按钮 。 修 改 more.android.js 代 码 如 下 : 


20 } 


// 这 里 省 略 了 没有 修改 的 


重新 加 载 应 


// 这 里 省 略 了 没有 修改 的 代码 


export default class more extends Component { 


constructor (props) { 
super (props) ; 
this.state = { 
dateText: ' 选 择 一 个 日 期 ' 
} 
} 


render() { 
return ( 

<View style={styles.container}> 
«Text style={styles.text}>{this.state.dateText}</Text> 
«Button title=' 日 期 选择 器 ' onPress={() => { 

console.1og(' 单 击 日 期 选择 按钮 ') ; 

}}></Button> 

</View> 


码 


a 


， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 添加 的 文本 和 按钮 效果 如 图 7.28 所 示 。 


D 


接着 ， 完 善 “ 日 期 选择 器 ”按钮 的 


01 
02 
03 
04 
05 
06 


// 这 里 省 略 了 没有 修改 的 代码 


图 7.28 


击 响 应 导 


件 ， 修 改 more.androidjs 代 码 如 下 : 


export default class more extends Component { 


// 这 里 省 略 了 没有 


render () 


{ 


修改 的 代码 


添加 文本 和 “ 


日 期 选择 器 ” 


按钮 


FI 


07 return ( 


08 «View style={styles.container}> 

09 «Text style-(styles.text]»(this.state.dateText]«/Text» 

10 «Button title=' 日 期 选择 器 ' onPress-(this. showDatePicker}> 

</Button> D 

11 </View> 

12 ig 

13 } 

14 

15  ShowDatePicker = async () => ( // 因为 await 是 异步 的 ， 所 以 这 里 使 用 async 

16 try ( 

A, let newState = {}; 

18 const {action, year, month, day} = await DatePickerAndroid. 
open () 7 // 使 用 await 等 待 选择 完 处 理 结 果 

19 if (action === DatePickerAndroid.dismissedAction) { 

20 newState['dateText'] = "取消 选择 "7 

21 ) else ( 

22 let date = new Date(year, month, day); 

23 newState['dateText'] = date.toLocaleDateString(); 

24 } 

25 

26 this.setState (newState); 

27 } catch ((code, message]) { 

28 console.warn(' 打 开 DatePickerAndroid 失 败 : ' + message); 

29 l 

30 J 

31 } 

32 

33 // 这 里 省 略 了 没有 修改 的 代码 


重新 加 载 应 用 ， 在 “更 多 ”页 面 ， 单 击 “ 日 期 选择 器 ”按钮 ， 弹 出 日 期 选择 器 ， 选 择 某 一 日 期 后 单 击 OK 按 钮 ， 效 果 如 图 7.29 和 图 7.30 所 示 。 


April 2017 
W T 


CANCEL 


04/01/17 


图 7.30 选择 具体 日 期 


2. TimepPickerAndroid 时 间 选 择 器 


和 DatePickerAndroid 类 似 ， 在 “更 多 ”页 


Ej 


添加 显示 时 间 的 文本 和 “时 间 选 择 器 ”按钮 。 修 改 more.android.js 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


03 export default class more extends Component { 
04 constructor (props) { 

05 super (props) ; 

06 this.state = { 

07 timeText: ' 选 择 一 个 时 间 ' 
08 } 

09 } 


11 render() { 

12 return ( 

13 «View style={styles.container}> 

14 «Text style-(styles.text]»(this.state.timeText)«/Text» 

15 «Button title=' 时 间 选 择 器 ' onPress-(this. showTimePicker]» 
«/Button» 

16 «/Niew» 

17 ) 

18 } 


20 _showTimePicker = async() => { 

21 try ( 

22 let newState = {}; 

23 const (action, minute, hour) = await TimePickerAndroid. 
open () ; 

24 if (action === TimePickerAndroid.dismissedAction) { 

25 newState['timeText'] = "取消 选择 "7 

26 } eise { 

27 newState['timeText'] = hour + ': 

28 ? '0' + minute 

29 : minute); 

30 H 

31 this.setState (newState); 

32 ) catch ((code, message]) ( 

33 console.warn('i]JfTimePickerAndroidlK: ' + message); 


' + (minute < 10 


38 // 这 里 省 略 了 没有 修改 的 代码 


D 
[ 


折 加 载 应 用 ， 在 “更 多 ”页 


， 单 击 “ 时 间 选 择 器 ”按钮 ， 弹 出 时 间 选 择 器 ， 选 择 某 一 时 间 后 单 击 OK 按钮 ， 效 果 如 


7.31 和 


7.32 所 示 。 


E 


CANCEL OK 


d) wa 10:03 


图 7.32 ”选择 具体 时 间 


基于 位 置 的 服务 已 经 成 为 应 用 中 必 不 可 少 的 功能 ， 本 书 前 面 曾 介绍 过 地 图 组 件 的 使 用 ， 这 里 将 介绍 React Native 提 供 的 地 理 位 置 API: Geolocation, 


法 。 


下 面 直接 用 一 个 例子 来 展示 Geolocation API 的 


对 于 Android 平 台 ， 修 改 more.android.js 代 码 如 下 : 


01 import React, (Component) from 'react'; 
02 import (StyleSheet, View, Button, Alert) from 'react-native'; 
03 import Geolocation from 'Geolocation'; 


05 export default class more extends Component { 

06 render() ( 

07 return ( 

08 «View style={styles.container}> 

09 <Button title=' 获 取 位 置 ' onPress={() => { 

10 Geolocation.getCurrentPosition((data) => ( 

11 Alert .alert (' 获 取 位 置 成 功 '，JSON.stringify (data)， 
null); 

12 ty QO => { 

13 Alert .alert (' 获 取 位 置 失 败 '，null, null); 


n; 
15 ))»«/Button» 
16 «/Niew» 


18 } 
19 j 


21 // 这 里 省 略 了 没有 修改 的 代码 


重新 加 载 应 用 ， 在 “更 多 ”页 面 中 单 击 “ 获 取 位 置 ”按钮 ， 可 结果 并 没有 获取 到 位 置 ， 而 是 发 生 了 如 图 7.33 所 示 的 错误 。 


仔细 阅读 错误 信息 可 以 发 现 ， 使 用 Geolocation API 要 请 求 访问 地 理 位 置 的 权限 ， 于 是 ， 在 Android 工 程 的 AndroidManifest.xml 文 件 中 添加 如 下 配置 : 


<uses-permission android:name-"android.permission.ACCESS FINE LOCATION" /> 


A, 意 : 通常 在 修改 原生 项 目 工程 中 的 文件 后 〈 例 如 上 述 的 AndroidManifestxml 文 件 ) ， 需 要 使 用 react-native run-ios Sureact-native run-android 命 令 重 新 编译 和 安装 React Native 应 用 。 


D 


重新 加 载 应 用 ， 单 击 “ 更 多 ”页 面 中 的 “获取 位 置 ” 按 钮 ， 此 时 可 以 获取 到 当前 的 位 置信 息 ， 如 


7.34 所 示 。 


Looks like the app doesn't have the 
permission to access location. 


Add the following line to your app's 
AndroidManifest.xml: 

«uses-permission 
android:name-"android.permission. ACCESS . 


throwLocationPermissionMissing 


LocationModule,]java:234 


getCurrentPosition 


一 - |q | TM] 
LocationModule.]1ava 


1nvoke 


Meth: 


invoke 


AF [D witty 


invoke 


invoke 


! 
yal 


7.33 ”使 用 Geolocation API 发 生 的 权限 错误 


di wa 10:32 


获取 位 置 成 功 


('mocked":false/timestamp": 
1486459183000;/'coords :{ Speed 
0, heading :0, accuracy : 
20/longitude": 
118.80288999999999/altitude": 
0,"latitude":32.06472833333333}} 


OK 


2. iOS 平 台 


对 于 iOS 平 台 ， 直 接 复制 more.androidjs 文 件 中 的 代码 至 more.iosjs 文 件 中 ， 然 后 重新 加 载 应 用 ， 单 击 “ 更 多 ”页 面 中 的 “获取 位 置 ”按钮 ， 就 可 以 获取 到 当前 的 位 置信 息 ， 如 图 7.35 所 示 。 


获取 位 置 成 功 


("coords": 
("speed":-1,"longitude": -122.406417,"la 
titude":37.785834,"accuracy": 

5," heading":-1," altitude": 
O,"altitudeAccuracy":-1),"timestamp": 
1486521215856.618) 


OK 


7.35 iOS 平台 使 用 Geolocation API 获 取 位 置信 息 


人 iOS 平 台 使 用 Geolocation API 也 是 需要 请 求 权 限 的 ， 在 iOS 工 程 的 Info.plist 文 件 中 增加 NSLocationWhenInUseUsageDesctiption 字 段 。 如 果 使 用 react-native init 创 建 项 目 ， 定 位 功能 会 被 默认 启用 。 


7.5.6 ”键盘 事件 一 一 Keyboard 


Keyboard API 可 以 用 来 监听 键盘 相关 的 事件 。 这 里 用 一 个 例子 来 展示 Keyboard API 的 用 法 ， 修 改 more.androidjs 代 码 如 下 : 


01 import React, (Component) from 'react'; 
02 import (StyleSheet, Keyboard, View, Text, TextInput) from 'react- 
native'; 

03 

04 import Screen from './Screen'; 

05 

06 export default class more extends Component 

07 constructor (props) { 

08 super (props) ; 

09 this.state = { 

10 keyboardText: ' 键 担 收 回 ' 

11 } 

12 } 

13 

14 componentWillMount() ( 

15 this.keyboardDidShowListener = Keyboard.addListener ('keyboard 
DidShow', () => { 

16 this.setState({keyboardText: ' 键 盘 弹 出 '}); 

17 D; 

18 this.keyboardDidHideListener = Keyboard.addListener ('keyboard 
DidHide', () => { 

19 this.setState({keyboardText: ' 键 盘 收 回 '}); 

20 D; 

21 } 

22 

23 render() ( 

24 return ( 

26 «View style={styles.container}> 

27 «Text style={styles.text}>{this.state.keyboardText }</Text> 

29 <TextInput style={styles.textinput}/> 

30 </View> 

31 i 

32 } 

33 

34 componentWillUnmount() { 

35 this.keyboardDidShowListener.remove () ; 

36 this. keyboardDidHideListener. remove () ; 

37 } 

38 } 

39 

40 const styles - StyleSheet.create(( 

41 // 这 里 省 略 了 没有 修改 的 代码 

42 textinput: ( 

43 width: Screen.width, 

44 height: 50, 

45 backgroundColor: 'lightgray' 

46 } 

47 DE 


Imi 


重新 加 载 应 用 ， 可 以 看 到 在 键盘 弹出 和 收回 时 ， 会 收 到 键盘 状态 变更 的 事件 ， 效 果 如 图 7.36 所 示 。 


7.5.7 


图 7.36  4& Jf Keyboard API 监 听 键 盘 事 件 


设备 联网 状态 一 一 NetInfo 


Netlnfo API 可 以 获知 设备 联网 或 离线 的 状态 信息 。 这 里 用 一 个 例子 来 展示 Netlnfo API 的 用 法 ,修改 more.androidjs 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代码 


export default class more extends Component { 


constructor (props) { 
super (props) ; 
this.state = { 
connectionInfo: '' 


} 
} 


componentDidMount() { 
NetInfo.addEventListener('change', this. handleConnectionInfo Change); 
NetInfo.fetch().done((connectionInfo) => ( 
this.setState ((connectionInfo]); 
n; 
} 


render () ( 
return ( 
<View style={styles.container}> 
«Text style={styles.text}> 当 前 联网 类 型 : {this.state. 
connectionInfo}</Text> 
</View> 
); 
} 


componentWillUnmount() { 
NetInfo.removeEventListener('change', this. handleConnection 
InfoChange); 

} 


_handleConnectionInfoChange = (connectionInfo) => { 
this.setState ({connectionInfo}) ; 


} 


// 这 里 省 略 了 没有 修改 的 代码 


另外 ， 和 Geolocation API 一 样 ，Netlnfo API 也 需要 请 求 权 限 ， 在 Android 工 程 的 AndroidManifest.xml 文 件 中 添加 如 下 配置 : 


« 


uses-permission android:name-"android.permission.ACCESS NETWORK STATE" /» 


重新 编译 和 安装 应 用 ， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 此 时 设备 的 联网 类 型 如 图 7.37 所 示 。 


键盘 收回 


当前 联网 类 型 : MOBILE 


图 7.37 4& Jf] NetInfo API 获 取 联网 信息 


7.5.8 权限 设置 一 一 PermissionsAndroid 


PermissionsAndroid API 可 以 使 用 Android M (BPAndroid7.0) 开始 提供 的 权限 模型 : 有 一 些 权限 写 在 AndroidManifest.xml 文 件 中 就 可 以 在 安装 时 自动 获得 ， 但 有 一 些 “ 和 危险” 的 权限 则 需要 弹出 提 
示 框 供用 户 选择 。PermissionsAndroid API 处 理 的 就 是 后 一 种 权限 申请 。 


ux: 关于 Android7.0 中 权限 模型 的 更 多 介绍 ， 读 者 可 以 参考 Working with System Permissions (https: //developer.android.com/training/permissions/declaring html#perm-needed) o 


Lus : 为 了 使 用 PermissionsAndroid API， 需 要 使 用 Android7.0 及 以 上 版 本 的 Android 设 备 。 
这 里 以 获取 照相 机 权限 为 例 ， 修 改 more.androidjs 代 码 如 下 : 


01  // 这 里 省 略 了 没有 修改 的 代码 


03 export default class more extends Component { 

04 constructor (props) { 

05 super (props) ; 

06 this.state = { 

07 permission: PermissionsAndroid.PERMISSIONS.CAMERA, ' 
08 hasPermission: 'Not Checked' 


10 } 


12 render() { 

13 return ( 

14 <View style={styles.container}> 

15 «Text style={styles.text}> 权 限 状态 : (this.state. hasPermission) 
</Text> 

16 «Button title=' 申 请 摄像 头 权限 ' 

17 onPress-(this. requestCameraPermission}></Button> 

18 </View> 

19 ); 

20 } 


2a _requestCameraPermission = async () => { 

23 let result = await PermissionsAndroid. request (this.state. permission, { 
24 title: "权限 申请 "， 

25 message: ' 申 请 摄像 头 权限 ' 

26 DE 

28 this.setState({hasPermission: result]); 

29 B 

30 } 


32 // 这 里 省 略 了 没有 修改 的 代码 
另外 ， 和 Geolocation API 和 Netlnfo AP| 一 样 ， 还 需要 在 Android 工 程 的 AndroidManifest.xm| 文 件 中 添加 如 下 配置 : 


«uses-permission android:name-"android.permission.CAMERA " /> 


重新 编译 和 安装 应 用 后 ， 首 次 运行 应 用 时 还 需要 允许 permit drawing over other apps 权 限 ， 如 图 7.38 所 示 。 


D 


获取 permit drawing over other apps 权 限 后 ， 按 “返回 ” 键 进入 应 用 ， 接 着 ， 打 开 “ 更 多 ”页 | 


Ru 
而 


请 摄像 头 权限 ”按钮 ， 效 果 如 图 7.39 所 示 。 


Ej 


Apps that can draw over other apps 


ch06 


Permit drawing over other apps 


This permission allows an app to di: splay on top of 
other rapi )5 you re using and may interfere with your 


use of the interface in other applications, or change 
what you think you are seeing in other applications 


7.38 ”获取 permit drawing over other apps 权 限 


Allow ch06 to take 
pictures and record 
video? 


DENY ALLOW 


图 7.39 ”申请 摄像 头 权限 


CR D 如 果 出 现 无 法 获取 权限 的 问题 ， 请 确保 Android 工 程 android/app/build.gradle 文 件 中 targetSdkVersion 的 配置 不 低 于 Android 设 备 的 版 本 ， 例 如，Android 设 备 版 本 为 24， 那 么 targetSdkVersion 的 配置 
也 需要 设置 成 24。 


ToastAndroid API 用 于 在 Android 设 备 上 显示 一 个 悬浮 的 提示 信息 。 这 里 用 一 个 例子 来 展示 ToastAndroid API 的 用 法 ， 修 改 more.android.js 代 码 如 下 : 


oe // 这 里 省 略 了 没有 修改 的 代码 


03 export default class home extends Component { 

a // 这 里 省 略 了 没有 修改 的 代码 

06 onBackAndroid = () => ( 

07 T // 最 近 2 秒 内 按 过 "返回 “ 键 才 退 出 应 用 

08 if (this.lastBackPressed && this.lastBackPressed + 2000 >= 
Date.now()) { 

09 return false; 

10 } 

11 

12 this.lastBackPressed = Date.now(); 

13 ToastAndroid. show (' 再 按 一 次 退出 应 用 '，Toastandroid.SHORT) ; 

14 return true; 

15 } 

16 

// 这 里 省 略 了 没有 修改 的 代码 

工 } 


重新 加 载 应 用 ， 按 “返回 ” 键 后 ， 此 时 会 弹出 悬浮 的 提示 框 ， 提 示 用 户 再 按 一 次 “返回 ” 键 退出 应 用 ， 效 果 如 


7.40 所 示 。 


D 


图 7.40 ”基于 ToastAndroid 的 悬浮 提示 框 


7.6 小结 


通过 本 章 使 用 React Native API 开 发 自 定义 组 件 的 例子 (包括 获取 分 辨 率 以 及 自 定义 动画 ) ， 不 仅 进一步 加 深 了 React Native 组 件 的 理解 ， 还 深入 研究 了 React Native API 的 原理 和 机 制 。React 
Native 应 用 的 详细 架构 如 图 7.41 所 示 。 


React Native 应 用 


JavaScript 桥 接 层 React Native 组 件 React Native API 


原生 平台 | | 原生 平台 UI 组 件 | | 自 定 义 原 生 组 件 || 原生 平台 APls 


图 7.41 React Native 应 用 的 整体 架构 


至 此 ， 基 于 React Native 平 台 Javascript API 开 发 的 所 有 知识 都 已 经 呈现 在 读者 面前 。 


但 是 在 使 用 React Native 进 行 实际 开发 时 ， 难 免 会 遇 到 以 下 这 些 情况 : 


- 需要 使 用 React Native 没 有 封装 的 原生 功能 。 


: 复 用 已 有 的 原生 组 件 或 原生 的 第 三 方 组 件 。 


“ 多 线程 调用 以 及 高 性 能 要 求 的 功能 ， 例 如 加 密 、 图 像 处 理 等 。 


为 此 ， 我 们 有 时 也 需要 编写 原生 代码 以 扩展 React Native 应 用 的 功能 ， 这 也 正 是 第 8 章 要 继续 学 习 和 讨论 的 内 容 。 


第 3 篇 “React Native 混 合 编程 
第 8 章 React Native 与 原生 平台 混合 编程 (1) 


$898 React Native 与 原生 平台 混合 编程 (2) 


第 10 章 ” 电 商 App 的 复 盘 


第 8 章 React Native 与 原生 平台 混合 编程 (1) 


通过 前 面 章节 的 介绍 可 知 : React Native 平 台 为 开发 者 提供 了 强大 的 组 件 和 API 支 持 。 但 是 在 使 用 React Native 进 行 实际 开发 时 ， 难 免 会 遇 到 以 下 这 些 情况 : 


- 需要 使 用 React Native 没 有 封装 的 原生 功能 。 


“ 复 用 已 有 的 原生 组 件 或 原生 的 第 三 方 组 件 。 


“ 多 线程 调用 以 及 高 性 能 要 求 的 功能 ， 如 加 密 、 图 像 处 理 等 。 


为 此 还 需要 编写 原生 代码 以 扩展 React Native 应 用 的 功能 ， 本 章 就 带领 读者 冲破 React Native 平 台 的 “小 圈子 ”， 走 入 广阔 的 原生 开发 世界 。 
As 本 章 属 于 React Native 开 发 进 阶 的 内 容 ， 除 了 涉及 React Native 和 JavaScript 之 外 ， 还 会 有 iOS 与 Android 原 生 代码 的 编写 。 读 者 可 以 按照 本 书 示例 编写 原生 代码 ， 或 者 参考 iOS/Android 开 发 的 相关 
书籍 和 教程 。 
本 章 主 要 内 容 有 : 
“ 访问 设备 。 
+ 访问 相册 。 
"了解 React Native 与 原生 平台 的 通信 原理 。 


- 掌握 React Native 与 原生 页 面 的 交互 。 


8.1 ”创建 并 移植 项 目 


在 React Native 开 发 中 ， 常 常 需要 访问 设备 的 相关 资源 。 


“ 设备 信息 ， 如 设备 名 称 、 系 统 版 本 及 系统 语言 等 。 


: 设备 存储 的 资源 ， 如 相册 中 的 图 片 等 。 


因此 本 节 就 以 读 取 设 备 资源 为 例 ， 来 看 一 下 编写 原生 代码 扩展 应 用 功能 的 一 般 方式 和 流程 。 


(1) 仍然 是 先 创建 React Native 项 目 并 安装 依赖 包 。 


react-native init ch07 // 新 建 React Native H ch07 
cd ch07 
npm install 


(2) 将 ch06 项 目 中 如 下 目录 或 文件 都 复制 到 ch07 文 件 来 中 : 


* Animation.js ; 


* app:js; 


+ detail.js; 


* home.android.js ; 


* home.ios.js ; 


: images; 


+ index.android.js ; 


+ index.ios.js ; 


+ main.android.js ; 


+ main.ios.js ; 


+ more.android.js ; 


* motre.ios.js; 

+ Platform.js; 

* Screen.jss 

(3) 删除 more.android.js 文 件 ， 并 修改 more.ios.js 文 件 名 为 more.js。 


(4) 修改 index.ios.js 和 index.android.js 中 的 代码 如 下 : 


01 import React, (Component) from 'react'; 

02 import (AppRegistry) from 'react-native'; 

03 import app from './app'; 

05 AppRegistry.registerComponent('ch07', () => app); // 修改 第 一 个 参数 为 'ch07' 


(5) 使 用 命令 react-native run-ios 或 者 react-native run-android 运 行 ch07 项 目 ， 确 保 ch06 项 目的 实现 成 功 移植 到 ch07 项 目 中 ， 效 果 如 图 8.1 所 示 。 
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8.2 


在 第 7 章 实现 自己 的 Platform APl 中 ， 已 经 编写 过 简单 的 原生 代码 来 实现 获取 设备 名 称 的 功能 ， 这 里 将 介绍 如 何 读 取 更 多 的 设备 信息 。 


访问 设备 


图 8.1 ch07 项 目 运行 效果 


(1) 新 建 一 个 文件 Devicelnfojs， 用 于 提供 设备 信息 的 接口 。 添 加 Devicelnfojjs 代 码 如 下 : 


01 
02 
03 
04 
05 
06 


export default ( 
'systemName' : 'unknown' 


, 


"systemVersion' : 'unknown', 
'defaultLanguage' : 'unknown', 


'appVersion' : 'unknown' 


ias: 这 里 的 DeviceInfo.js 文 件 中 导出 的 是 一 个 普通 的 模块 ， 而 不 是 类 似 home.js 文 件 使 用 extends React.Component # 8j] 09 React NativeZ8 4T o 


(2) 在 “更 多 ”页 面 中 显示 设备 相关 信息 。 修 改 morejs 代 码 如 下 : 


import React, {Component} from 'react'; 


import {StyleSheet, View, Text} 


from 'react-native'; 


import DeviceInfo from './DeviceInfo'; 


export default class more extends Component { 


render() { 
return ( 


<View style={styles.container}> 


</View> 


«Text style={styles.text}> 系 统 名 称 : 


systemName)«/Text» 


«Text style={styles.text}> 系 统 版 本 : 


systemVersion}</Text> 


«Text style={styles .textj}> 默 认 语言 : 


defaultLanguage}</Text> 


«Text style={styles.text}> 应 用 版 本 : 


appVersion}</Text> 


{DeviceInfo. 
{DeviceInfo. 
{DeviceInfo. 


(DeviceInfo. 
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系统 名 称 : unknown 
系统 版 本 : Unknown 
BASE: unknown 


应 用 版 本 : unknown 


To 


对 于 iOS 平 台 ， 使 用 Xcode 打开 ios/ch08.xcodeproj 文 件 ， 然 后 新 建 Devicelnfo 类 : 生成 两 个 文件 Devicelnfo.m 和 Devicelnfo.h， 其 中 Devicelnfo.m 是 源 文件 ，Devicelnfo.h 是 头 文件 ， 效 果 如 图 


v [5 cho7 
v | 1 ch07 
main.jsbundle 

hi AppDelegate.h 
m AppDelegate.m 
Images.xcassets 
«| Info.plist 
=) LaunchScreen.xib 
m main.m 
h, Devicelnfo.h 

> | Libraries 

> | | chO7Tests 

> | "| Products 


图 8.3 在 iOS 工 程 中 新 建 DeviceInfo 类 


(1) 修改 Devicelnfo.h 代 码 如 下 : 


-— ss = 


> 


8.3 所 


01 #import «React/RCTBridgeModule.h» 

02 

03 Ginterface DeviceInfo : NSObject <RCTBridgeModule> 
04 

05 @end 


其 中 ，RCTBridgeModule 是 React Native 平 台 为 开发 者 提供 的 与 原生 平台 通信 的 桥接 接口 。 


(2) 实现 原生 代码 的 接口 ， 修 改 源 文件 Devicelnfo.m 代 码 如 下 : 


01  fimport "Platform.h' 
0 


2 #import «UIKit/UIKit.h» 

D @implementation DeviceInfo 

06 RCT_EXPORT_MODULE () // 导出 此 原生 模块 供 React Native 接 口 调用 
d - (NSDictionary *)constantsToExport { 

T UIDevice *currentDevice = [UIDevice currentDevice]; 


11 return @{ 


12 G"systemName": currentDevice.systemName, // 系统 名 称 


13 G"systemVersion": currentDevice.systemVersion, // 系统 版 本 

14 @"deviceLocale": self.deviceLocale, // 系统 语言 

15 G"appVersion": [[NSBundle mainBundle] objectForInfoDictionary 
Key: @"CFBundleShortVersionString"], // 应 用 版 本 

16 he // 返回 键 值 对 

17 } 

18 

19 - (NSString *)deviceLocale { 

20 NSString *language = [[NSLocale preferredLanguages] objectAtIndex:0]; 

21 return language; 

22 } 

23 

24 - (NSString *)deviceCountry { 

25 NSString *country - [[NSLocale currentLocale] objectForKey: NSLocale 

CountryCode] ; 

26 return country; 

27 } 

28 

29 @end 


(3) React Native 平 台中 通过 NativeModules 调 用 原生 平台 实现 的 方式 为 Native Modules. 模 块 名 称 .接口 名 称 。 所 以 修改 Devicelnfo.js 代 码 如 下 : 


01 import {NativeModules} from 'react-native'; 


02 

03 export default ( 

04 'systemName' : NativeModules.DeviceInfo.systemName, 

05 'systemVersion' : NativeModules.DeviceInfo.systemVersion, 
06 'defaultLanguage' : NativeModules.DeviceInfo.deviceLocale, 
07 'appVersion' : NativeModules.DeviceInfo.appVersion 

08 j 


(4) 重新 编译 和 运行 iOS 应 用 ， 查 看 “更 多 ”页 


， 此 时 显示 就 是 有 效 的 设备 信息 了 ， 效 果 如 图 8.4 所 示 。 


回 
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图 8.4 iOS 平 台 读 取 设备 信息 


对 于 Android 平 台 ， 使 用 Android Studio 打 开 android 文 件 夹 ， 然 后 新 建 DevicelnfoModule 类 ， 该 类 继承 自 com.facebook.react.bridge.ReactContextBasejavaModule， 效 果 如 医 


Name DevicelnfoModule 
Kind IC Class 
Superclass com.facebook.react.bridge.ReactContextBaseJavaModule 


Interface(s) 


Package: com.ch07 


Visibility e Public Package Private 


Modifiers e None Abstract 


Show Select Overrides Dialog 


8.5 所 示 。 


图 8.5 ”在 Android 工 程 中 新 建 DeviceInfoModule 类 


(1) 新 建 DevicelnfoModule 类 成 功 后， 再 修改 DevicelnfoModulejava 代 码 如 下 : 


B // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 

03 public class DeviceInfoModule extends ReactContextBaseJavaModule ( 

04 private final ReactApplicationContext mReactContext; 

05 

06 public DeviceInfoModule (ReactApplicationContext reactContext) { 
07 super (reactContext) 7 

08 this.mReactContext = reactContext; 

09 H 

10 

11 GOverride 

12 public String getName() ( 

13 return "DeviceInfo"; // 模块 名 称 

14 } 

15 

16 @Override 

17 public @Nullable 

18 Map<String, Object> getConstants() { 

19 HashMap<String, Object> constants = new HashMap<String, Object>(); 
20 constants .put ("systemName", "Android") ; 

21 constants.put ("systemVersion", Build.VERSION.RELEASE) ; 
22 constants.put ("deviceLocale", this.getCurrentLanguage ()); 
2d constants.put ("appVersion", this.getAppVersion()); 

24 return constants; // 返回 键 值 对 
25 } 

26 

27 // 这 里 省 略 了 具体 的 方法 实现 

28 j 


(2) 其 中 getCurrentLanguage () 和 getAppVersion () 方法 的 具体 实现 如 下 : 


01  // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 Androiq Studio 会 自动 导入 所 依赖 的 模块 
02 


03 public class DeviceInfoModule extends ReactContextBaseJavaModule { 

// 这 里 省 略 了 上 述 已 经 描述 的 代码 

06 private String getCurrentLanguage() { 

07 Locale current = getReactApplicationContext () .getResources () . 
getConfiguration().locale; 

08 if (Build.VERSION.SDK INT >= Build.VERSION CODES.LOLLIPOP) ( 

09 return current.toLanguageTag(); ` 

10 ) else ( 

1i StringBuilder builder = new StringBuilder(); 

12 builder.append (current.getLanguage ()); 

13 if (current.getCountry() != null) ( 

14 builder.append("-"); 

15 builder.append (current.getCountry ()); 

16 j 

17 return builder.toString(); 

18 H 

19 } 

20 

21 private String getAppVersion() { 

22 String appVersion = "not available"; 

23 try { 

24 PackageManager packageManager = this.mReactContext.get 

PackageManager () ; 

25 String packageName = this.mReactContext.getPackageName () ; 

26 PackageInfo info = packageManager.getPackageInfo (packageName, 0); 

2 constants.put ("appVersion", info.versionName) ; 

28 } catch (PackageManager.NameNotFoundException e) { 

29 e.printStackTrace () 7 

30 j 

31 return appVersion; 

32 } 

33 } 


(3) 与 iOS 平 台 导出 模块 类 似 ，Android 平 台 也 需要 将 Devicelnfo 模 块 导出 供 React Native 接 


这 里 再 新 建 Devicelnfo.java 文 件 ， 并 添加 代码 如 下 : 


B // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 
03 public class DeviceInfo implements ReactPackage { 

04 GOverride 

05 public List<NativeModule> createNativeModules ( 

06 ReactApplicationContext reactContext) { 
07 List«NativeModule» modules = new ArrayList<>(); 
08 modules .add (new DeviceInfoModule (reactContext)); 
09 return modules; 

10 } 

11 

12 @Override 

13 public List<Class<? extends JavaScriptModule>> createJSModules() { 
14 return Collections.emptyList (); 

15 } 

16 

17 @Override 

18 public List<ViewManager> createViewManagers ( 

19 ReactApplicationContext reactContext) { 
20 return Collections.emptyList(); 

21 } 

22 } 


(4) 还 需要 在 MainApplication.java 文 件 中 注册 ， 才 算 正 式 完成 导出 Devicelnfo 模 块 的 操作 。 修 改 MainApplication.java 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 

03 public class MainApplication extends Application implements React 
Application ( 

04 

05 private final ReactNativeHost mReactNativeHost - new ReactNative 

Host(this) ( 

06 // 这 里 省 略 了 没有 修改 的 代码 

07 

08 GOverride 

09 protected List«ReactPackage» getPackages() ( 

10 return Arrays.«ReactPackage»asLlist ( 

11 new MainReactPackage (), new DeviceInfo() 

12 ye 

13 } 

14 F 

15 

16 // 这 里 省 略 了 没有 修改 的 代码 

17 } 


// 导出 DeviceInfo 模 块 


由 


(5) 


新 编译 和 运行 Android 应 用 ， 查 看 “更 多 ”页 面 ， 此 时 显示 的 就 是 有 效 的 设备 信息 了 ， 效 果 如 


8.6 所 示 。 


dl ta 3:21 | 


系统 名 称 : Android 
系统 版 本 : 5.1.1 
A E a. en-US 
应 用 版 本 : 1.0 


8.3 


8.2 节 为 React Native 应 


访问 相册 


(1) 创建 组 件 ， 新 建 ImagepPickerjs 文 件 ， 添 加 代码 如 下 : 


09 


(2) 


import React, 


{Component} from 'react'; 


扩展 了 读 取 设 备 信息 的 功能 ， 由 于 已 经 有 了 7.4 节 自 


图 8.6 


Android 平 台 读 取 设 备 信息 


己 实现 Platform 的 经 验 ， 想 必 读 者 还 是 觉得 : 


import (StyleSheet, Text, View, TouchableOpacity) from 'react-native'; 


export default class ImagePicker extends Component ( 
render() ( 
return ( 
«View style={styles.container}> 
<TouchableOpacity> 


«View style={[styles.avatarContainer, 


styles.avatar] }> 


<Text style={styles.text}> 选 择 图 片 <//Text> 


</View> 
</TouchableOpacity> 
</View> 


} 


const styles = StyleSheet.create ({ 


container: { 
alignSelf: 'center', 
flexDirection: 'row' 

Fa 

avatarContainer: { 
justifyContent: 'center', 
alignItems: 'center', 
borderColor: 'lightgray', 


borderWidth: 2 
ty 


avatar: { 
width: 200, 
height: 200, 
borderRadius: 100 

] 

text: ( 
fontSize: 30 

} 

n; 
在 “更 多 ”页 面 中 显示 该 组 件 ， 修 改 more.js 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代码 
import ImagePicker from './ImagePicker'; 
export default class more extends Component { 
render() ( 
return ( 
«View style-(styles.container]» 
«ImagePicker/» 
«/Niew» 


} 
// 这 里 省 略 了 没有 修改 的 代码 


重新 加 载 应 用 ， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 封装 的 ImagePicker 组 件 效果 如 图 8.7 所 示 。 
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和 


恨 轻松 的 。 本 节 将 实现 一 个 更 复杂 的 原生 接 


A: 读 取 相册 


i 


的 


网 


8.3. 


如 图 


48.7 自 定义 ImagePicker 组 件 


在 准备 好 模块 的 定义 和 页 面 展 示 之 后 ， 就 可 以 专心 开发 与 原生 平台 交互 的 接口 了 。 


1 读 取 iOS 相 册 中 的 图 片 


对 于 iOS 平 台 ， 使 用 Xcode 打开 ios/ch08.xcodeproj 文 件 ， 然 后 新 建 ImagePicker 类 : 生成 ImagepPicker.m 和 ImagepPicker.h 两 个 文件 ， 其 中 ImagepPicker.m 是 源 文 件 ，ImagepPicker.h 是 头 文件 ， 效 果 
8.8 所 示 。 


v [5j cho7 
v | | ch07 
main.jsbundle 
hm AppDelegate.h 
m AppDelegate.m 
Images.xcassets 
«| Info.plist 
加 LaunchScreen.xib 
m main.m 
h) Devicelnfo.h 
m Devicelnfo.m 
h ImagePicker.h 
m ImagePicker.m 
> | Libraries 
> | "| chO7Tests 
> | 3 Products 


8.8 ”在 iOS 工 程 中 新 建 ImagePicker 类 


(1) 修改 lImagePicker.h 代 码 如 下 : 


E 


01 #import <React/RCTBridgeModule.h> 

02 #import <UIKit/UIKit.h> 

03 

04 @interface ImagePicker : NSObject <RCTBridgeModule, UINavigationController 
Delegate, UIImagePickerControllerDelegate> 

05 

06 @end 


(2) 实现 原生 代码 的 接口 ， 在 iOS 开 发 中 源 文 件 主要 有 两 部 分 组 成 : 
“ 头 文件 和 接口 定义 。 


“ 类 接口 的 详细 实现 。 


首先 导入 头 文件 和 定义 接口 


， 修 改 ImagepPicke 


rm 代码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 


#import "ImagePicker.h" 


#import «React/RCTConvert.h» 
#import <AssetsLibrary/AssetsLibrary.h> 
#import <AVFoundation/AVFoundation.h> 

#import «Photos/Photos.h» 


@import MobileCoreServices; 


@interface ImagePicker () 


@property (nonatomic, retain) NSMutableDictionary *options, *response; 
@property (nonatomic, strong) RCTResponseSenderBlock callback; 
Gproperty (nonatomic, strong) UlImagePickerController *picker; 


Gend 


Gimplementation ImagePicker 


// 这 里 省 略 了 具体 的 方法 实现 


Gend 


然后 实现 launchlmagePicker 接 | 


， 修 改 ImagePicker.m 代 码 如 下 : 


01 // 这 里 省 略 了 上 述 已 经 描述 的 代码 
02 
03 Gimplementation ImagePicker 
04 
05 RCT EXPORT MODULE(); 
06 
07 RCT EXPORT METHOD (launchImagePicker: (NSDictionary *)options callback: 
(RCTResponseSenderBlock)callback) ( 
08 self.options = [NSMutableDictionary dictionaryWithDictionary: options]; 
09 self.callback - callback; 
10 
11 // 创建 UIImagePickerController 
12 self.picker - [[UIImagePickerController alloc] init]; 
13 self.picker.sourceType = UlImagePickerControllerSourceTypePhoto 
Library; 
14 self.picker.mediaTypes = @[(NSString *)kUTTypeImage] ; 
15 self.picker.modalPresentationStyle = UIModalPresentationCurrent 
Context; 
16 self.picker.delegate = self; 
17 
18 // 获取 相册 权限 
19 [self checkPhotosPermissions:^ (BOOL granted) { 
20 if (!granted) ( 
21 self.callback(8[G(G"error": @"Photo library permissions 
not granted"]]); 
22 return; 
23 } 
24 
25 // 打开 UIImagePickerController 
26 dispatch async (dispatch get main queue(), ^( 
27 UIViewController *root = [[[[UIApplication sharedApplication] 
delegate] window] rootViewController]; 
28 while (root.presentedViewController != nil) { 
29 root = root.presentedViewController; 
30 } 
31 [root presentViewController:self.picker animated:YES completion: 
nil]; 
32 D; 
33 n 
34 f 
35 3s ` 
36 // 这 里 省 略 了 具体 的 辅助 接口 实现 
37 
38 Gend 
(3) 在 用 户 进行 选择 图 片 操作 之 后 ， 原 生 代码 需要 对 选择 的 图 片 进行 处 理 ， 然 后 将 图 片 返回 给 React Native 平 台 ， 该 实现 涉及 的 辅助 接口 代码 如 下 : 
01 Gimplementation ImagePicker 
02 
03 // 这 里 省 略 了 上 述 已 经 描述 的 代码 
04 
05 #pragma mark - UIImagePickerControllerDelegate 
06 
07 - (void)imagePickerController: (UIImagePickerController *)picker did 
FinishPickingMediaWithInfo: (NSDictionary«NSString *,id» *)info ( 
// 选择 某 一 图 片 
08 UIImage *image = [info objectForKey:UIImagePickerControllerOriginal 
Image]; 
09 . 
10 // 图 片 缩放 
了 float maxWidth = image.size.width; 
12 float maxHeight = image.size.height; 
13 if ([self.options valueForKey:G8"maxWidth"]) { 
14 maxWidth = [[self.options valueForKey:G8"maxWidth"] floatValue]; 
15 } 
16 if ([self.options valueForKey:@"maxHeight"]) ( 
TI maxHeight = [[self.options valueForKey:@"maxHeight"] floatValue]; 
18 } 
19 image = [self downscaleImageIfNecessary:image maxWidth:maxWidth 
maxHeight :maxHeight]; 
20 
21 // 设置 图 片 路 径 
22 NSString *fileName; 
23 if ([[[self.options objectForKey:@"imageFileType"] stringValue] 
isEqualToString:8"png"]) ( 
24 fileName = [[[NSUUID UUID] UUIDString] stringByAppendingString: 
8" .png"]; 
25 ) else ( 
26 fileName = [[[NSUUID UUID] UUIDString] stringByAppendingString: 
8" .3pg"]; 
27 } 
28 NSString *path = [[NSTemporaryDirectory ()stringByStandardizing 
Path] stringByAppendingPathComponent:fileName]; 
29 NSData *data = UIlImageJPEGRepresentation (image, [[self.options 
valueForKey:@"quality"] floatValue]); 
30 [data writeToFile:path atomically:YES]; 
31 
32 self.response - [[NSMutableDictionary alloc] init]; 
33 
34 // 设置 图 片 uri 
35; NSURL *fileURL = [NSURL fileURLWithPath:path]; 
36 NSString *filePath = [fileURL absoluteString]; 
37 [self.response setObject:filePath forKey:@"uri"]; 
38 
39 // 设置 图 片 大 小 
40 NSNumber *fileSizeValue = nil; 
41 NSError *fileSizeError = nil; 
42 [fileURL getResourceValue:&fileSizeValue forKey:NSURLFileSizeKey 
error:&fileSizeError]; 
43 if (fileSizeValue) { 
44 [self.response setObject:fileSizeValue forKey:@"fileSize"]; 
45 } 
46 us 
47 // 回调 函数 


48 self.callback(8[self.response]l); 


49 

50 // XWUIImagePickerController 

51 [picker dismissViewControllerAnimated:YES completion:nil]; 

52 H 

53 

54 - (void)imagePickerControllerDidCancel: (UIImagePickerController *)picker ( 
E // WGBE GRE 

55 // 回调 函数 

56 self.callback (@[@{@"didCancel": @YES}]); 

57 

58 // 关闭 UIImagePickerController 

59 [picker dismissViewControllerAnimated:YES completion:nil]; 

60 H 

61 M N 

62 // 这 里 省 略 了 具体 的 辅助 接口 实现 

63 

64 Gend 


上 述 代码 中 用 到 的 checkPhotosPermissions () flldownscalelmagelfNecessary () 具体 实现 如 下 : 


01 @implementation ImagePicker 


02 
03 // 这 里 省 略 了 上 述 已 经 描述 的 代码 
04 
05 #pragma mark - Helpers 
06 
07 - (void)checkPhotosPermissions: (void(^) (BOOL granted))callback ( 
08 PHAuthorizationStatus status - [PHPhotoLibrary authorization 
Status]; 
09 if (status == PHAuthorizationStatusAuthorized) { 
10 callback (YES); 
11 return; 
12 ) else if (status == PHAuthorizationStatusNotDetermined) ( 
13 [PHPhotoLibrary requestAuthorization:^ (PHAuthorizationStatus 
status) { 
14 if (status == PHAuthorizationStatusAuthorized) { 
15: callback (YES); 
16 return; 
17 ) else ( 
18 callback (NO); 
19 return; 
20 H 
21 He 
22 } else { 
23 callback (NO) ; 
24 } 
25 } 
26 
27 - (UlImage*)downscaleImageIfNecessary: (UIImage*) image maxWidth: (float) 
maxWidth maxHeight: (float)maxHeight { 
28 UIImage* newImage = image; 
29 if (image.size.width <= maxWidth && image.size.height <= maxHeight) { 
30 return newImage; 
31 } 
32 
33 // 计算 大 小 
34 CGSize scaledSize = CGSizeMake (image.size.width, image.size. 
height); 
35 if (maxWidth « scaledSize.width) ( 
36 scaledSize = CGSizeMake (maxWidth, (maxWidth / scaledSize.width) 
* scaledSize.height); 
37 } 
38 if (maxHeight < scaledSize.height) { 
39 scaledSize = CGSizeMake ( (maxHeight / scaledSize.height) * 
scaledSize.width, maxHeight) ; 
40 = 
41 scaledSize.width = (int)scaledSize.width; 
42 scaledSize.height = (int)scaledSize.height; 
43 
44 // 缩放 图 片 
45 UIGraphicsBeginImageContext (scaledSize); 
46 [image drawInRect:CGRectMake(0, 0, scaledSize.width, scaledSize. 
height) ]; 
47 newImage = UIGraphicsGetImageFromCurrentImageContext (); 
48 if (newImage == nil) { 
49 NSLog(@"could not scale image"); 
50 } 
51 UIGraphicsEndImageContext () 7 
52 
3 return newImage; 
54 } 
55 
56 @end 


(4) 完成 了 原生 代码 之 后 ， 还 需要 完善 ImagePicker 组 件 : 调用 iOS 原 生 代码 的 接口 并 使 用 返回 


m 
[ea 
出 


图 片 ， 修 改 ImagepPickerjs 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 
02 
03 export default class ImagePicker extends Component { 
04 constructor (props) { 
05 super (props) ; 
06 this.state = ( 
07 avatarSource: null 
08 Hi 
09 D: 
10 
11 render () ( 
12 return ( 
13 <View style={styles.container}> 
14 <TouchableOpacity onPress={this. selectPhotoTapped}> 
15 «View style-( [styles.avatarContainer, styles.avatar]]» 
16 {this.state.avatarSource === null 
17 ? «Text style={styles.text}> 选 择 图 片 </Text> 
18 : <Image style={styles.avatar} 
19 source={this.state.avatarSource}/> 
20 } 
21 </View> 
22 </TouchableOpacity> 
23 </View> 
24 ) 7 
25 } 
26 
2 _selectPhotoTapped = () => ( 
28 const options = { 
29 quality: 1.0, 
30 maxWidth: 500, 
31 maxHeight: 500 
32 nu 
33 
34 NativeModules.ImagePicker.launchImagePicker (options, (response) 
=> { 
35 if (response.didCancel) { 
36 console. log (' 取 消 选 择 图 片 '); 
37 } else if (response.error) { 
38 console. log (' 选 择 图 片 错 误 : ', response.error); 
39 ) else ( 
40 let source = ( 
41 uri: response.uri.replace('file://', '') 
42 E 
43 this.setState({avatarSource: source]); 
44 } 


45 n; 
46 } 
47 } 


48 
49 // 这 里 省 略 了 没有 修改 的 代码 


重新 编译 和 运行 iOS 应 用 ， 打 开 “ 更 多 ”页 面 ， 单 击 “ 选 择 图 片 ”按钮 ， 然 后 选择 某 张 图 片 ， 效 果 如 图 8.9 和 图 8.10 所 示 。 
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图 8.9 iOS 平 台 读 取 图 片 资源 
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图 8.10 具体 图 片 


8.3.2” 读 取 Android 相 册 中 的 图 片 


对 于 Android 平 台 ， 使 用 Android Studio 打 开 android 文 件 夹 ， 然 后 新 建 ImagePicker Module 类 ， 该 类 继承 自 com.facebook.react.bridge.ReactContextBasejavaModule， 效 果 如 图 8.11 所 示 。 


Name ImagePickerModule 


Kind Q Class 


Superclass com.facebook.react.bridge.ReactContextBaseJavaModule 


Interface(s) 
Package 
Visibility u Package Private 


Abstract 


Show Select Overrides Dialog 


图 8.11 在 Android 工 程 中 新 建 ImagePickerModule 类 


(1) 实现 launchlmagePicker 接 口 ， 修 改 ImagepPickerModulejava 代 码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 

03 public class ImagePickerModule extends ReactContextBaseJavaModule 
implements ActivityEventListener ( 

04 static final int REQUEST LAUNCH IMAGE LIBRARY = 13002; 

05 private final ReactApplicationContext mReactContext; 

06 private Callback mCallback; 

07 private WritableMap mResponse; 

09 public ImagePickerModule (ReactApplicationContext reactContext) ( 

10 super (reactContext) ; 

11 mReactContext = reactContext; 

12 reactContext.addActivityEventListener (this) ; 

13; j; 

15 GOverride 

16 public String getName() ( 

17 return "ImagePicker"; // 模块 名 称 

18 f 

20 @ReactMethod 

21 public void launchImagePicker (final ReadableMap options, final 

Callback callback) { 

22 mCallback = callback; 

23 mResponse = Arguments .createMap () 7 

25. Intent libraryIntent = new Intent (Intent.ACTION PICK, 

26 MediaStore.Images.Media.EXTERNAL CONTENT URI); 

27 try { ~ a 

28 // 打开 图 库 

29 int requestCode = REQUEST LAUNCH IMAGE LIBRARY; 

30 Activity currentActivity = getCurrentActivity(); 

31 currentActivity.startActivityForResult (libraryIntent, 

requestCode); 

32 } catch (ActivityNotFoundException e) { 

33 e.printStackTrace(); 

34 if (mCallback != null) { 

35 mResponse.putString("error", "Cannot launch photo 

library"); 

36 mCallback.invoke (mResponse); 

37 mCallback - null; 

38 } 

39 } 

40 } 

42 // 这 里 省 略 了 具体 的 辅助 接口 实现 

43 f 


(2) 在 用 户 进行 选择 图 片 操作 之 后 ， 原 生 代码 需要 对 选择 的 图 片 进 行 处 理 ， 然 后 将 图 片 返回 给 React Native 平 台 ， 该 实现 涉及 的 辅助 接口 代码 如 下 : 
01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android studio 会 自动 导入 所 依赖 的 模块 


03 public class ImagePickerModule extends ReactContextBaseJavaModule 


implements ActivityEventListener 


{ 
04 // 这 里 省 略 了 上 述 已 经 描述 的 代码 


05 
06 public void onActivityResult (Activity activity, int requestCode, 
int resultCode, Intent data) ( 

07 mResponse = Arguments.createMap(); 

08 

09 // 用 户 取消 

10 if (resultCode != Activity.RESULT OK) { 

dl mResponse.putBoolean("didCancel", true); 

12 mCallback.invoke (mResponse); 

13 mCallback - null; 

14 return; 

15 j 

16 

17 Uri uri = data.getData(); 

18 String realPath - getRealPathFromURI (uri); 

19 if (!TextUtils.isEmpty(realPath)) { 

20 // 解码 图 片 

21 Options options = new Options(); 

22 options.inJustDecodeBounds = true; 

23 BitmapFactory.decodeFile (realPath, options); 

24 

25 // 回调 函数 

26 mResponse.putString("uri", uri.toString()); 

27 mResponse.putString("path", realPath); 

28 mCallback.invoke (mResponse); 

29 mCallback - null; 

30 ) eise ( 

31 if (mCallback != null) ( 

32 mResponse.putString("error", "Cannot launch photo 
library"); 

33 mCallback.invoke (mResponse); 

34 mCallback - null; 

35 H 

36 } 

37 } 

38 

39 public void onNewIntent (Intent intent) { 

40 f 

41 

42 private String getRealPathFromURI(Uri uri) ( 

43 String result; 

44 String[] projection = (MediaStore.Images.Media.DATA); 

45 if (uri == null || TextUtils.isEmpty(uri.toString())) { 

46 return ""; 

47 } 

48 Cursor cursor = mReactContext.getContentResolver () .query (uri, 

projection, null, null, null); 

49 if (cursor == null) { 

50 result = uri.getPath(); 

51 ) else ( 

52 cursor.moveToFirst(); 

23 int idx = cursor.getColumnIndexOrThrow (MediaStore. Images. 

Media.DATA); 

54 result = cursor.getString (idx) ; 

55: cursor.close(); 

56 } 

57 return result; 

58 } 

59 } 


(3) 和 访问 设备 的 例子 类 似 ，Android 项 


还 需要 将 ImagePicker 模 块 导 出 供 React Native 接 


。 这 里 再 新 建 ImagePicker.java 文 件 ， 并 添加 代码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 
02 


03 public class ImagePicker implements ReactPackage ( 

04 GOverride 

05 public List«NativeModule» createNativeModules ( 

06 ReactApplicationContext reactContext) { 
07 List«NativeModule» modules = new ArrayList<>(); 
08 modules.add(new ImagePickerModule (reactContext) ) ; 
09 return modules; 

10 } 

11 

12 @Override 

13 public List<Class<? extends JavaScriptModule>> createJSModules () 
14 return Collections.emptyList(); 

15 } 

16 

T7 GOverride 

18 public List«ViewManager» createViewManagers ( 

19 ReactApplicationContext reactContext) { 
20 return Collections.emptyList (); 

21 } 

22 } 


{ 


(4) 还 需要 在 MainApplication.java 文 件 中 注册 ， 才 算 正 式 完成 导出 ImagePicker 模 块 的 操作 。 修 改 MainApplication.java 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代码 


03 public class MainApplication extends Application implements React 

Application { 
04 
05 private final ReactNativeHost mReactNativeHost - new ReactNative 

Host(this) ( 
08 // 这 里 省 略 了 没有 修改 的 代码 
08 GOverride 
09 protected List«ReactPackage» getPackages() ( 
10 return Arrays.«ReactPackage»asList( 
11 new MainReactPackage(), new DeviceInfo(), new Image 
Picker() // 导出 ImagePicker 模 块 

12 ) 7 
13 } 
14 i 
15 
16 // 这 里 省 略 了 没有 修改 的 代码 

} 


(5) 完成 了 原生 代码 之 后 ， 还 需要 完善 ImagePicker 组 件 : 调用 Android 原 生 代码 的 接 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 

03 export default class ImagePicker extends Component { 

ie // 这 里 省 略 了 没有 修改 的 代码 

06 selectPhotoTapped = () => { 

07 E const options = ( 

08 quality: 1.0, 

09 maxWidth: 500, 

10 maxHeight: 500 

T ti 

12 

13 NativeModules.ImagePicker.launchImagePicker (options, 
=> { 

14 if (response.didCancel) { 

15) console. log (' 取 消 选择 图 片 ') ; 


16 } else if (response.error) { 


(response) 


片 ， 修 改 ImagePicker.js 代 码 如 下 : 


改 的 代码 


(6) 重新 编译 和 运行 Android 应 用 ， 打 开 “ 更 多 ”页 面 ， 单 击 “ 选 择 图 片 ”按钮 ， 然 后 选择 某 张 图 片 ， 效 果 如 图 8.12 和 图 8. 


图 8.12 ” Android 平台 读 取 图 片 资源 


图 8.13 具体 图 片 


84 React Native 与 原生 平台 的 通信 原理 


通过 访问 设备 的 例子 可 以 看 出 React Native 平 台 与 原生 平台 的 通信 原理 ， 如 图 8.14 所 示 。 


React Native 平 台 NativeModules 


原生 平台 Native 


图 8.14 React Native 与 原生 平台 通信 原理 


* React Native 平 台 调 用 原生 平台 基于 NativeModules， 调 用 的 方法 是 NativeModules. 模 块 名 称 .接口 名 称 。 


“ 原生 平台 返回 数据 到 React Native 平 台 基 于 回调 ， 回 调 的 原型 定义 是 RCTResponse SenderBlock (iOS 平 台 ) 和 com.facebook.react.bridge.Callback (Android 平 台 ) 。 


当 JavaScript 接 口 调 


原生 代码 时 ， 


React Native 


string 
number 


boolean 
array 
map 


function 


React Native 与 原生 平台 的 数据 类 型 对 应 关系 如 表 8.1 所 示 。 


表 8.1 


iOS 平 台 


NSString 


NSInteger. float. double, CGFloat, 


NSNumber 


8.5 React Native 平 台 调 用 原生 页 面 


在 了 解 了 React Native 与 原生 平台 通信 的 原理 之 后 ， 下 面 通过 两 者 交互 的 实例 看 一 下 详细 的 通信 过 程 。 


(1) 创建 一 个 


于 实现 通信 功能 的 Communication 组 件 ， 新 建 Communication.js 文 件 ， 添 加 代码 如 下 : 


React Native 与 原生 平台 的 数据 类 型 对 应 关系 


Android 平 台 


String 

Integer. Double, Float 
Bool 

List 

Map 


com.facebook.react.bridge.Callback 


render() ( 
return ( 


13 } 
14 } 


const styles = StyleShee 
container: { 
alignSel 
flexDire 
20 H 


import React, {Component} from 'react'; 
import {StyleSheet, View, Button, Alert} from 'react-native'; 


export default class Communication extends Component { 


<View style={styles.container}> 
«Button title=' 调 用 原生 组 件 ' onPress={() => { 
Alert.alert (' 调 用 原生 组 件 '，null, null); 
}}/> 


</View> 


七 .Create ({ 


f: 'center', 
ction: 'row' 


(2) 在 “更 多 ”页 面 中 显示 该 组 件 


， 修 改 more.js 代 码 如 下 : 


// 这 里 省 略 了 没有 修改 的 代 丰 


import Communication fro 


render() ( 
return ( 


12 } 
13 } 


// 这 里 省 略 了 没有 修改 的 代码 


E 


m './Communication; 


export default class more extends Component { 


«View style={styles.container}> 
«Communication/» 
</View> 


(3) 重新 加 载 应 


Carrier F 


， 打 开 “ 更 多 ”页 面 ， 可 以 看 到 封装 的 Communication 组 件 效果 如 图 8.15 所 示 。 


10:07 AM 


调用 原生 组 件 


图 8.15” 自 定义 Communication 组 件 


在 准备 好 组 件 和 页 面 展示 之 后 ， 就 可 以 专心 开发 与 原生 平台 交互 的 接口 了 。 


8.5.1 React Native 平 台 调用 原生 iOS 页 面 


对 于 iOS 平 台 ， 使 用 Xcode 打开 ios/ch08.xcodeproj 文 件 ， 然 后 新 建 Communication 类 : 生成 两 个 文件 Communication.m 和 Communication.h， 其 中 Communication.m 是 源 文 
件 ，Communication.h 是 头 文件 ， 效 果 如 图 8.16 所 示 。 


v [5j cho7 
v | | ch07 
main.jsbundle 
h) AppDelegate.h 
m AppDelegate.m 
Images.xcassets 
| Info.plist 
=) LaunchScreen.xib 
m main.m 
h) Devicelnfo.h 
m, Devicelnfo.m 
hl ImagePicker.h 
m. ImagePicker.m 
h Communication.h 
| Communication.m 
am | 1Libraries 
> | 3 ch07Tests 
> Products 


图 8.16 iOS 4£ Hf 3£ Communication JE 


(1) 修改 Communication.h 代 码 如 下 : 


01 #import <React/RCTBridgeModule.h> 

02 

03 @interface Communication : NSObject<RCTBridgeModule> 
04 

05 @end 


(2) 实现 原生 代码 的 接口 ， 修 改 源 文件 Communication.m 代 码 如 下 : 


01 #import "Communication.h" 


02 

03 Gimplementation Communication 

04 

05 RCT EXPORT MODULE () ; 

06 

07 RCT EXPORT METHOD (presentViewControllerFromReactNative: (NSString 
*)params) { 

08 NSLog(8"React Native 传 递 的 参数 : $8", params); // 打印 传递 的 参数 

09 } 

10 

11 Gend 


(3) 在 React Naitve 代 码 中 调用 该 原生 接口 ， 修 改 Communication.js 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


03 export default class Communication extends Component { 

04 render() ( 

05 return ( 

06 «View style={styles.container}> 

07 «Button title=' 调 用 原生 组 件 ' onPress-(() => { 

08 NativeModules.Communication.presentViewController 
FromReactNative ('12345'); 

09 n» 

10 «/Niew» 


12 } 


15 // 这 里 省 略 了 没有 修改 的 代码 


重新 编译 和 运行 ijOs 应 用 ， 打 开 “ 更 多 ”页 面 ， 单 击 “ 调 用 原生 组 件 ” 按 钮 ， 可 以 看 到 Xcode 中 打印 日 志 “React Native 传 递 的 参数 : 12345”， 效 果 如 图 8.17 所 示 。 


2017-02-13 10:21:41.696 ch07[5990:514486] React Native 传 递 的 参数 : 12345 


图 8.17 Xcode 打印 日 志 


(4) 连通 React Native 与 原生 平台 通信 的 接口 之 后 ， 就 可 以 继续 完善 原生 接口 了 : 打开 一 个 原生 界面 并 显示 从 React Native 中 传递 的 数据 。 


新 建 CommunicationViewController 类 ， 该 类 继承 自 UlViewController， 效 果 如 图 8.18 所 示 。 


payee : iOS 开 发 中 的 UIViewConttroller 是 指 视图 控制 器 ， 简 单 来 说 ， 可 以 理解 每 一 个 UIViewController 以 及 继承 自 UIViewController 的 类 都 是 一 个 界面 。 


Choose options for your new file: 


Class: CommunicationViewController 


Subclass of: UlViewController v 


Also create XIB file 


<> 


Language: Objective-C 


Cancel Previous Next 


图 8.18 在 iOS 工 程 中 新 建 CommunicationViewController 类 


(5) 修改 头 文件 CommunicationViewController.h 代 码 如 下 : 


01 #import <UIKit/UIKit.h> 


02 

03 @interface CommunicationViewController : UIViewController 
04 

05 @property (nonatomic, copy) NSString *params; 

06 

07 Gend 


(6) 完善 原生 界面 显示 的 内 容 ， 修 改 源 文件 CommunicationViewController.m 代 码 如 下 : 


01 #import "CommunicationViewController.h" 

02 

03 Ginterface CommunicationViewController () 

04 

05 Gend 

06 

07 @implementation CommunicationViewController 

08 

09 #pragma mark - Lifecycle 

10 

11 - (void) viewDidLoad { 

12 [super viewDidLoad] ; 

13 

14 self.view.backgroundColor = [UIColor whiteColor]; 

15 

16 UlTextView *textView = [[UITextView alloc] initWithFrame:CGRectMake 
(20, 20, 200, 40)]; 

17 textView.text = @" 原 生 界面 "; 

18 [textView setFont:[UIFont systemFontOfSize:20]]; " 

19 [self.view addSubview:textView]; // 显示 "原生 界面 “提示 信息 

20 

21 UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; 

22 button.frame = CGRectMake(20, 60, 60, 40); 

23 [button setTitle:@" 退 出 " forState:UIControlStateNormal]; 

24 [button addTarget:self action:@selector (buttonOnClicked:) for 
ControlEvents:UIControlEventTouchUpInside]; 

25 [self.view addSubview:button]; // 退出 原生 界面 的 按钮 

26 } 

27 

28 - (void) viewDidAppear: (BOOL) animated ( 

29 [super viewDidAppear: animated] ; 

30 

31 UIAlertController *alertController = [UIAlertController alert 


ControllerWithTitle:@"MReact Native 传 来 的 数据 是 :" message:self. 
params preferredStyle:UIAlertControllerStyleAlert]; 


32; UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:Q"Hi 
il" style:UIAlertActionStyleCancel handler:nil]; 

33 [alertController addAction:cancelAction]; 

34 [self presentViewController:alertController animated:YES completion: 
nil]; // 显示 React Native 传 递 的 参数 

35 } 

36 

37 #pragma mark - IBActions 

38 

39 - (void)buttonOnClicked: (UIButton *)button { // 按钮 响应 事件 

40 [self dismissViewControllerAnimated:YES completion:nil]; 

4l } 

42 

43 @end 


(7) 修改 用 于 通信 的 Communication 中 的 逻辑 ， 修 改 Communication.m 代 码 如 下 : 


01 #import "Communication.h" 

02 #import "CommunicationViewController.h" 

03 #import "AppDelegate.h" 

04 

05 @implementation Communication 

06 

07 RCT EXPORT MODULE () ; 

08 

09 - (dispatch queue t)methodQueue { 

10 return dispatch get main queue; // 因为 是 显示 界面 ， 所 以 让 原生 接口 运 

zs Es 行 在 主线 程 

11 } 

12 

13 RCT EXPORT METHOD (presentViewControllerFromReactNative: (NSString *)params) { 

14 = CommunicationViewController *communicationViewController = 
[[CommunicationViewController alloc] init]; 

15 communicationViewController.params = params; 

16 

17 AppDelegate *app = (AppDelegate *) [[UIApplication sharedApplication] 
delegate]; 

18 UIViewController *rootViewContoller = (UIViewController *) [[app 
window] rootViewController]; 

19 

20 [rootViewContoller presentViewController:communicationViewController 
animated:YES completion:nil]; 

21 $ 

22 

23 Gend 


(8) 重新 编译 和 运行 iOS 应 用 ， 打 开 “ 更 多 ”页 面 ， 单 击 “ 调 用 原生 组 件 ”按钮 ， 此 时 就 打开 了 一 个 原生 界面 并 显示 React Native 传 递 的 参数 ， 效 果 如 图 8.19 所 示 。 


im 


从 React Native 传 来 的 数据 是 : 


12345 


取消 


图 8.19 React Native 平 台 调用 iOS 原 生 页 面 


8.5.2 React Native 平 台 调 用 原生 Android 页 面 


对 于 Android 平 台 ， 使 用 Android Studio 打 开 android 文 件 夹 ， 然 后 新 建 Communication Module 类 并 实现 startActivityFromReactNative 接 口 。 


(1) 修改 CommunicationModulejava 代 码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 androiqd Studio 会 自动 导入 所 依赖 的 模块 


02 

03 public class CommunicationModule extends ReactContextBaseJavaModule { 

04 

05 private final ReactApplicationContext mReactContext; 

06 

07 public CommunicationModule (ReactApplicationContext reactContext) ( 

08 super (reactContext); 

09 this.mReactContext = reactContext; 

10 } 

11 

12 @Override 

13 public String getName() { 

14 return "Communication"; // 模块 名 称 

15 } 

16 

17 @ReactMethod 

18 public void startActivityFromReactNative (String activityName, 
String params) { 

19 try { 

20 Activity currentActivity = getCurrentActivity(); 

21 if (currentActivity != null) { 

22 Class toActivity = Class. forName (activityName) ; 

23 Intent intent = new Intent(currentActivity, toActivity); 

24 intent.putExtra ("params", params) ; 

25 currentActivity.startActivity (intent) ; 

26 } 

27 } catch (Exception e) { 

28 throw new JSApplicationIllegalArgumentException ("SJ FF 

ActivitykM: " + e.getMessage()); 

29 H 

30 } 

31 

32 } 


(2) Android 项 目 还 需要 将 Communication 模 块 导 出 供 React Native 接 口 调用 。 新 建 Communication.java 文 件 ， 添 加 代码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 


02 

03 public class Communication implements ReactPackage { 

04 GOverride 

05 public List<NativeModule> createNativeModules ( 

06 ReactApplicationContext reactContext) { 
07 List«NativeModule» modules = new ArrayList<>(); 
08 modules.add(new CommunicationModule (reactContext) ) 7 
09 return modules; 

10 } 

11 

12 GOverride 

13 public List<Class<? extends JavaScriptModule>> createJSModules() { 
14 return Collections.emptyList(); 

15 } 

16 

17 @Override 

18 public List<ViewManager> createViewManagers ( 

19 ReactApplicationContext reactContext) { 
20 return Collections.emptyList(); 

21 } 

22 } 


(3) 在 MainApplication.java 文 件 中 注册 Communication 模 块 ， 修 改 MainApplication.java 代 码 如 下 : 


or // 这 里 省 略 了 没有 修改 的 代码 
03 public class MainApplication extends Application implements React 
Application ( 
04 
05 private final ReactNativeHost mReactNativeHost - new React 
NativeHost(this) ( 
"E // 这 里 省 略 了 没有 修改 的 代码 
08 GOverride 
09 protected List«ReactPackage» getPackages() ( 
10 return Arrays.<ReactPackage>asList ( 
11 new MainReactPackage(), new DeviceInfo(), new Image 
Picker(), new Communication () // 导出 Communication 模 块 
12 ) 7 
13 f 
14 }; 
15 
16 // 这 里 省 略 了 没有 修改 的 代码 
17 } 


(4) 完成 了 原生 代码 之 后 ， 还 需要 修改 Communication 组 件 的 逻辑 : 针对 不 同 原生 平台 调用 相应 的 接口 ， 修 改 Communication.js 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 

03 export default class Communication extends Component ( 

04 render() ( 

05 return ( 

06 «View style={styles.container}> 

07 «Button title=' 调 用 原生 组 件 ' onPress-(() => { 

08 if (Platform.OS = 'ios') { 

09 NativeModules.Communication.presentView 
ControllerFromReactNative ('12345'); 

10 ) else if (Platform.OS === 'android') { 

11 NativeModules.Communication.startActivityFrom 
ReactNative ('CommunicationActivityl', '12345'); 

12 

13 n/» 

14 «/Niew» 

15 ye 

16 } 

TI } 

18 

19 // 这 里 省 略 了 没有 修改 的 代码 

(5) 这 里 React Native 需 要 打开 名 为 CommunicationActivity1 的 页 面 ， 因 此 还 需要 在 Android 工 程 中 添加 该 页 面 ， 新 建 CommunicationActivity1 类 ， 该 类 继承 自 Activity， 添 加 代码 如 下 : 

01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 Androiq Studio 会 自动 导入 所 依赖 的 模块 

02 

03 public class CommunicationActivityl extends Activity { 

04 

05 GOverride 

06 protected void onCreate (Bundle savedInstanceState) { 

07 super.onCreate (savedInstanceState); 

08 setContentView(R.layout.communication activityl); 

09 

10 Intent intent = getIntent(); 

11 if (intent != null) { 


12 String params = intent.getStringExtra ("params"); 


13 if (params != null) { 

14 Toast .makeText (this，" 从 React Native 传 来 的 数据 是 : " + 
params, Toast.LENGTH SHORT) . show () 7 

15 l 

16 } 

17 } 

18 

19 } 


Ars : Android 开 发 中 添加 的 Activity 必 须要 在 AndroidManifest.xml 文 件 中 注册 («activity android: name=".CommunicationActivity1"/>) ， 和 否则 将 找 不 到 该 Activity。 


上 述 CommunicationActivity1 中 使 用 的 布局 文件 communication_activity1.xml 代 码 如 下 : 


01 <?xml version="1.0" encoding="utf-8"?> 

02 <LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
03 android:orientation="vertical" android:layout_width="match_parent" 
04 android:layout_height="match_parent"> 

05 

06 <TextView 

07 android:id="@+id/textView" 

08 android:layout width-"match parent" 

09 android:layout height-"wrap content" 

10 android:text-"EUESMW" /> ~ 

1 

12 </LinearLayout> 


(6) 重新 编译 和 运行 Android 应 用 ， 打 开 “ 更 多 ”页 面 ， 单 击 “ 调 用 原生 组 件 ” 按 钮 ， 此 时 就 打开 了 一 个 原生 界面 并 显示 React Native 传 递 的 参数 ， 效 果 如 图 8.20 所 示 。 


iml 


从 React Native 传 来 的 数据 是 : 12345 


图 8.20 React Native 平 台 调 用 Android 原 生 页 面 


Cus. 上 述 例子 涉及 了 较 多 的 原生 知识 和 代码 ， 限 于 篇 幅 ， 这 里 没有 一 一 详细 介绍 。 感 兴趣 的 读者 ， 可 以 参考 iOS/Android 开 发 的 相关 书籍 和 教程 。 


8.6 ”原生 平台 调用 React Native 组 件 


本 节 接 着 介绍 原生 平台 如 何 调 用 React Native 组 件 。 其 实 ， 我 们 很 早 就 接触 并 了 解 了 原生 平台 调用 React Native 组 件 的 方式 ， 只 是 读者 可 能 没有 留意 到 。 


例如 ，React Native 应 用 根 组 件 的 注册 和 调用 ， 原 理 如 图 8.21 所 示 。 


React Native 应 用 


AppRegistry.registerQomponent 

注册 根 组 人 
istry.runApplication 
主 册 过 的 根 组 件 


图 8.21 ”注册 React Native 应 用 的 根 组 件 


8.6.1 iOS 平 台 调 用 React Native 组 件 


对 于 iOS 平 台 ， 在 React Native 应 用 中 首先 注册 根 组 件 ch07，index.iosjs 代 码 如 下 : 


01 import React, (Component) from 'react'; 
import (AppRegistry) from 'react-native'; 
03 import app from './app'; 


4 
05 AppRegistry.registerComponent('ch07', () => app); 


AppRegistry.registerComponent 接 口 将 React Native 平 台 的 根 组 件 ch07 注 册 到 了 原生 平台 上 。 当 React Native 应 用 启动 时 ， 原 生平 台 会 调用 该 组 件 ，iOS 工 程 中 调用 React Native 组 件 的 
AppDelegate.m 代 码 如 下 : 


01 // 这 里 省 略 了 无 关 的 代码 


02 

03 - (BOOL)application: (UIApplication *)application didFinishLaunching 
WithOptions: (NSDictionary *)launchOptions 

{ 

04 NSURL *jsCodeLocation; 

05 

06 jsCodeLocation - [[RCTBundleURLProvider sharedSettings] jsBundle 

URLForBundleRoot :@"index.ios" fallbackResource:nil]; 
07 
08 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: 


jsCodeLocation 
moduleName:@"ch07" 
initialProperties:nil 
launchOptions: launchOptions] ; 
09 rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green: 
1.0f blue:1.0f alpha:1]; 


10 

11 self.window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen] . 
bounds]; 

12 UIViewController *rootViewController = [UIViewController new]; 

13 rootViewController.view = rootView; 

14 self.window.rootViewController - rootViewController; 

T5 [self.window makeKeyAndVisible]; 

16 return YES; 

17 } 

18 

19 // 这 里 省 略 了 无 关 的 代码 


8.6.2 Android 平 台 调 用 React Native 组 件 


对 于 Android 平 台 ， 在 React Native 应 用 中 首先 注册 根 组 件 ch07，index.android.js 代 码 如 下 : 


01 import React, {Component} from 'react'; 


02 import {AppRegistry} from 'react-native'; 

03 import app from './app'; 

04 

05 AppRegistry.registerComponent ('ch07', () => app); 


AppRegistry.registerComponent 接 口 将 React Native 平 台 的 根 组 件 ch07 注 册 到 了 原生 平台 上 。 当 React Native 应 用 启动 时 ， 原 生平 台 首 先 会 打开 MainActivity，AndroidManifest.xml 文 件 中 的 配置 


方法 如 下 : 
01 «activity 
02 android:name-".MainActivity" 
03 android:label-"8string/app name" 
04 android:configChanges-"keyboard|keyboardHidden|orientation| 
screenSize"> 
05 <intent-filter> 
06 <action android:name="android.intent.action.MAIN" /> 
07 «category android:name-"android.intent.category.LAUNCHER" /> 
// 应 用 启动 打开 MainActivity 
08 «/intent-filter» 
09 «/activity» 


MainActivity 继 承 自 com.facebook.react.ReactActivity，ReactActivity 封 装 了 React Native 组 件 ， 


因 


此 ， 当 getMainComponentName 接 


中 注册 的 ch07 组 件 。MainActivityjava 代 码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 


03 public class MainActivity extends ReactActivity { 

04 

05 yee 

06 * Returns the name of the main component registered from JavaScript. 
07 * This is used to schedule rendering of the component. 
08 E$ 

09 @Override { 

10 protected String getMainComponentName () 

11 return "ch07"; 

12 } 

13 } 


返 


回 


ch07 时 ， 此 时 MainActivity 打 开 的 就 是 React Native 


通过 上 述 原生 平台 打开 React Native 根 组 件 的 过 程 可 知 ，React Native 应 用 的 启动 流程 如 下 : 


“ 首先 还 是 启动 原生 平台 的 应 用 。 


“ 然后 原生 平台 再 调用 注册 的 根 组 件 。 


8.7 We 


目前 ， 很 多 App 都 采用 了 React Native 与 原生 代码 混 编 的 形式 ， 虽 然 让 读者 学 起 来 比较 头疼 ， 比 如 是 否 只 学 习 React Native 就 够 了 ， 还 是 要 多 学 习 另 外 两 种 平台 的 开发 ， 这 样 岂 不 是 增加 了 很 多 负担 ? 


读者 也 可 以 只 学 习 本 章 介绍 的 简单 的 原生 功能 ， 不 过 案例 实现 的 手 ; 


就 


第 9 章 React Native 与 原生 平台 混合 编程 (2) 


没有 那么 多 了 。 接 下 来 的 第 9 章 中 还 会 学 习 更 多 的 原生 功能 ， 希 望 读 者 能 够 继续 保持 学 习 的 动力 。 


原生 功能 除了 访问 设备 、 访 问 手机 相册 ， 其 实 还 可 以 照相 。 同 时 ，React Native 除 了 能 与 原生 页 面 交互 ， 还 可 以 对 整个 项 目 进行 支持 ， 这 些 内 容 本 章 都 会 涉及 。 


本 章 主要 内 容 有 : 


+ 使 用 相机 拍摄 照片 。 


“ 添加 图 片 选择 提示 框 。 


“ 重 构图 片 选择 库 。 


+ 向 iOS 项 目 中 添加 React Native 支 持 。 


+ 向 Android 项 目 中 添加 React Native 支 持 。 


9.1 使 用 相机 拍摄 图 片 
想 要 使 用 设备 的 图 片 资源 ， 除 了 从 相册 读 取 外 ， 还 可 以 使 用 设备 的 相机 拍摄 照片 。React 
9.1.1 使 用 iOS 相 机 拍摄 


首先 添加 并 实现 launchCamera 接 口 ， 修 改 ImagePicker.m 代 码 如 下 : 


Native 代 码 仍然 基于 ImagePicker 组 件 ， 因 此 这 里 我 们 直接 编写 原生 平台 的 实现 。 


m // 这 里 省 略 了 没有 修改 的 代码 
03 RCT EXPORT METHOD (launchCamera: (NSDictionary *)options callback: (RCT 
ResponseSenderBlock) callback) { 
04 self.options = [NSMutableDictionary dictionaryWithDictionary: options]; 
05 self.callback = callback; 
06 
07 // 创建 UIImagePickerController 
08 self.picker = [[UIImagePickerController alloc] init]; 
09 #if TARGET IPHONE SIMULATOR 
10 self.callback(G[G(G"error": @"Camera not available on simulator"}]); 
11 return; 
12 #else 
13 self.picker.sourceType = UlImagePickerControllerSourceTypeCamera; 
14 #endif 
15 self.picker.mediaTypes = @[ (NSString *) kUTTypeImage] ; 
16 self.picker.modalPresentationStyle = UIModalPresentationCurrent 
Context; 
17 self.picker.delegate = self; 
18 
19 // 获取 相机 权限 
20 [self checkCameraPermissions:^(BOOL granted) { 
21 if (!granted) ( 
22 self.callback(G[G8 (G8 "error": @"Camera permissions not 
granted"}]); 
23 return; 
24 } 
25 
26 // 打开 UIImagePickerController 
27 dispatch async (dispatch get main queue(), ^{ 
28 UIViewController *root = [[[[UIApplication sharedApplication] 
delegate] window] rootViewController]; 
29 while (root.presentedViewController != nil) { 
30 root = root.presentedViewController; 
31 } 
32 [root presentViewController:self.picker animated:YES completion: 
nil]; 
33 D; 
34 We 
35 } 
36 
3 // 这 里 省 略 了 没有 修改 的 代码 
39 - (void)checkCameraPermissions: (void(^) (BOOL granted))callback ( 
40 AVAuthorizationStatus status - [AVCaptureDevice authorization 
StatusForMediaType:AVMediaTypeVideo]; 
41 if (status == AVAuthorizationStatusAuthorized) { 
42 callback (YES) ; 
43 return; 
44 } else if (status == AVAuthorizationStatusNotDetermined) { 
45 [AVCaptureDevice requestAccessForMediaType:AVMediaTypeVideo 
completionHandler:^(BOOL granted) { 
46 callback (granted) ; 
47 return; 
48 Hs 
49 ) else ( 
50 callback (NO); 
51 } 
52 } 
53 
54 // 这 里 省 略 了 没有 修改 的 代码 


接着 再 调整 ImagePicker 组 件 的 相应 逻辑 : 将 调用 的 launchlmagePicker 接 | 


改 为 launchCamera， 修 改 ImagePickerjs 代 码 如 下 : 


01  // 这 里 省 略 了 没有 修改 的 代码 

02 

03 export default class ImagePicker extends Component ( 

0 // 这 里 省 略 了 没有 修改 的 代码 

06 _selectPhotoTapped = () => { 

07 const options = { 

08 quality: 1.0, 

09 maxWidth: 500, 

10 maxHeight: 500 

11 nu 

12 

13 NativeModules.ImagePicker.launchCamera(options, (response) => { 
// 启动 相机 

14 if (response.didCancel) ( 

15 console.1og(' 取 消 选择 图 片 ') 7 

16 } else if (response.error) { 

17 console. log (' 选 择 图 片 错误 : ', response.error); 

18 } else ( 

19. let source; 

20 if (Platform.OS 'ios') { 

21 source = { 

22 uri: response.uri.replace('file://', '') 

23 B 

24 ) else if (Platform.OS 'android') ( 

25 source = { 

26 uri: response.uri 

27 H 

28 H 

29 this.setState({avatarSource: source]); 

30 } 

31 n; 

32 } 

33 

34 // 这 里 省 略 了 没有 修改 的 代码 

35 } 

37 

38 // 这 里 省 略 了 没有 修改 的 代码 

在 编译 和 运行 应 用 之 前 需要 注意 的 是 ， 由 于 iOS 模 拟 器 不 支持 摄像 头 ， 所 以 这 里 需要 使 用 iPhone 真 机 来 验证 上 述 例子 ， 首 先 连 接 iPhone 真 机 ， 然 后 在 Xcode 中 选择 已 连接 的 iPhone 真 机， 效果 如 图 9.1 


所 示 。 


图 9.1 Xcode 使 用 iPhone 真 机 


重新 编译 和 运行 应 用 ， 打 开 “ 更 多 ”页 面 ， 单 击 “ 选 择 图 片 ”按钮 ， 然 后 使 用 相机 拍摄 一 张 图 片 ， 选 择 右 侧 的 Use Photo 按 钮 ， 效 果 如 图 9.2 所 示 。 


seeee 中 国电 信 m n 15:18 @ <7 0 $ 95% G+ 


> 


Retake Use Photo 


9.2 iOS 平 台 使 用 相机 拍摄 图 片 


9.1.2 ”使 用 Android 相 机 拍摄 


首先 还 是 添加 并 实现 launchCamera 接 口 ， 修 改 lImagePickerModule.java 代 码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 Androiqd Studio 会 自动 导入 所 依赖 的 模块 


02 
03 public class ImagePickerModule extends ReactContextBaseJavaModule 
implements ActivityEventListener { 

04 static final int REQUEST LAUNCH IMAGE CAPTURE = 13001; 

05 static final int REQUEST LAUNCH IMAGE LIBRARY = 13002; 

06 private final ReactApplicationContext mReactContext; 

07 private Callback mCallback; 

08 private WritableMap mResponse; 

09 private Uri mCameraCaptureURI; 

10 

11 // 这 里 省 略 了 没有 修改 的 代码 

12 

13 GReactMethod 

14 public void launchCamera (final ReadableMap options, final Callback 

callback) ( 

15 // 判断 设备 是 否 支持 相机 

16 if (!isCameraAvailable()) { 

17 return; 

18 } 

19 

20 mCallback = callback; 

21 mResponse = Arguments.createMap(); 

22 

23 Intent cameraIntent = new Intent (MediaStore.ACTION IMAGE 

CAPTURE) ; 0 = 

24 mCameraCaptureURI = Uri.fromFile (createNewFile ()) ; 

25 cameraIntent.putExtra (MediaStore.EXTRA OUTPUT, mCameraCaptureURI) ; 

26 

27 try ( 

28 // 打开 相机 ， 并 存储 拍摄 的 图 片 

29 int requestCode = REQUEST LAUNCH IMAGE CAPTURE; 

30 Activity currentActivity = getCurrentActivity (); 

31 currentActivity.startActivityForResult (cameraIntent, 
requestCode) ; 

32 } catch (ActivityNotFoundException e) { 

33: e.printStackTrace () 7 

34 if (mCallback != null) ( 

35 mResponse.putString("error", "Cannot launch camera"); 

36 mCallback.invoke (mResponse); 

3T mCallback - null; 

38 } 

39 } 

40 } 

41 

// 这 里 省 略 了 具体 的 辅助 接口 实现 

4 } 


同时 还 需要 更 新 对 用 户 选择 


网 


片 操作 的 处 理 ， 修 改 lImagePickerModule.java 文 件 中 的 onActivityResult 代 码 如 下 : 


// 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 


03 public class ImagePickerModule extends ReactContextBaseJavaModule 
implements ActivityEventListener ( 

04 // 这 里 省 略 了 上 述 已 经 描述 的 代码 

05 

06 public void onActivityResult (Activity activity, int requestCode, 

int resultCode, Intent data) ( 

07 mResponse = Arguments.createMap(); 

08 

09 // 用 户 取消 

10 if (resultCode != Activity.RESULT OK) ( 

11 mResponse.putBoolean ("didCancel", true); 

12 mCallback.invoke (mResponse); 

13 mCallback - null; 

14 return; 

15 } 

16 

iT // 获取 图 片 uri 

18 Uri uri; 

19 switch (requestCode) { 

20 case REQUEST LAUNCH IMAGE CAPTURE: 

21 uri = mCameraCaptureURI; 

22 break; 

23 case REQUEST LAUNCH IMAGE LIBRARY: 

24 uri = data.getData(); 

25 break; 

26 default: 

27 uri - null; 

28 H 

29 String realPath - getRealPathFromURI (uri); 

30 

31 if (!TextUtils.isEmpty(realPath)) { 

32 // 解码 图 片 

33 Options options = new Options(); 

34 options.inJustDecodeBounds - true; 

35 BitmapFactory.decodeFile (realPath, options); 

36 

37 // 回调 函数 

38 mResponse.putString("uri", uri.toString()); 

39 mResponse.putString("path", realPath); 

40 mCallback.invoke (mResponse); 

41 mCallback = null; 

42 } else { 

43 if (mCallback != null) { 

44 mResponse.putString("error", "Cannot launch photo library"); 

45 mCallback. invoke (mResponse) ; 

46 mCallback = null; 

47 } 

48 } 

49 } 

50 

51 // 这 里 省 略 了 具体 的 辅助 接口 实现 

52 } 


上 述 代码 中 涉及 的 辅助 接口 isCameraAvailable 和 createNewFile 代 码 如 下 : 


or // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 androiq studio 会 自动 导入 所 依赖 的 模块 
03 public class ImagePickerModule extends ReactContextBaseJavaModule 
implements ActivityEventListener ( 

04 // 这 里 省 略 了 上 述 已 经 描述 的 代码 

05 

06 private boolean isCameraAvailable() ( 

07 return mReactContext.getPackageManager () .hasSystemFeature (Package 
Manager.FEATURE CAMERA) 

08 || mReactContext.getPackageManager () .hasSystemFeature (Package 

Manager.FEATURE CAMERA ANY); 

09 } E] ~ 

10 

dad private File createNewFile() { 

12 String filename = "image-" + UUID.randomUUID() .上 toString () + 
"jpg"; 

13 File path = Environment.getExternalStoragePublicDirectory 
(Environment. DIRECTORY_PICTURES) ; 

14 File f = new File (path, filename); 

15 try ( 

16 path.mkdirs(); 

17 f.createNewFile(); 

18 ) catch (IOException e) ( 

19 e.printStackTrace(); 

20 H 

21 return f; 

22 } 

23 

24 } 


最 后 读者 容易 忘记 的 是 ， 由 于 使 用 和 到 了 Android 设 备 的 相机 和 存储 功能 ， 所 以 还 需要 请 求 权 限 ， 在 Android 工 程 的 AndroidManifest.xml 文 件 中 添加 如 下 配置 : 


«uses-permission android:name-"android.permission.CAMERA" /> 
<uses-permission android:name-"android.permission.READ EXTERNAL STORAGE" /» 
<uses-permission android:name-"android.permission.WRITE EXTERNAL STORAGE"/» 


重新 编译 和 运行 应 用 ,打开 “更 多 ”页 面 ， 单 击 “ 选 择 图 片 ”按钮 ， 然 后 使 用 相机 拍摄 一 张 图 片 ， 效 果 如 图 9.3 所 示 。 


9.3. Android 平台 使 用 相机 拍摄 图 片 


第 8 章 的 读 取 相 册 和 9.1 节 的 使 用 相机 拍摄 图 片 的 内 容 组 成 了 图 片 库 的 基本 功能 。 要 实现 完整 的 图 片 库 ， 只 需要 再 添加 一 个 图 片 选 择 提示 框 。 


对 于 iOS 平 台 ， 首 先 添加 并 实现 launchlmageLibrary 接 口 ， 修 改 ImagePicker.m 代 码 如 下 : 


01 // 这 里 省 略 了 包含 的 头 文件 

02 

03 @import MobileCoreServices; 

04 

05 @interface ImagePicker () 

06 

07 @property (nonatomic, retain) NSMutableDictionary *options, *response; 

08 @property (nonatomic, strong) RCTResponseSenderBlock callback; 

09 @property (nonatomic, strong) UIImagePickerController *picker; 

10 @property (nonatomic, strong) UIAlertController *alertController; 

11 

12 @end 

13 

14 @implementation ImagePicker 

15 

16 RCT EXPORT METHOD (launchImageLibrary: (NSDictionary *)options callback: 

(RCTResponseSenderBlock)callback) ( 

17 self.callback - callback; 

18 

19 // 创建 UIAlertController 

20 self.alertController = [UIAlertController alertController WithTitle: 
@" 照 片 库 " message:nil preferredStyle:UIAlertControllerStyle 
ActionSheet]; 

21 UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:Q"Hi 
i" style:UIAlertActionStyleCancel handler:*(UIAlertAction * action) { 

22 self.callback(@[@{@"didCancel": @YES}]); 

23 ie 

24 [self.alertController addAction:cancelAction] ; 

25 UIAlertAction *takePhotoAction = [UIAlertAction actionWithTitle:@ 
"相册 " style:UIAlertActionStyleDefault handler:^(UIAlertAction * 
action) { 

26 [self launchImagePicker:options callback:callback]; 

27 We 

28 [self.alertController addAction:takePhotoAction]; 

29 UlAlertAction *chooseFromLibraryAction = [UIAlertAction action 


WithTitle:@" 相 机 " style:UIAlertActionStyleDefault handler:^ 
(UIAlertAction * action) { 

30 [self launchCamera:options callback:callback]; 

31 Bn 


JIIUIAlertController 


32 
33 
34 
35 
36 


37 


38 
39 
40 
41 


[self.alertController addAction:chooseFromLibraryAction] ; 


// 打开 UIAlertController 

dispatch async (dispatch get main queue(), ^{ 
UIViewController *root = [[[[UIApplication sharedApplication] 
delegate] window] rootViewController]; 
[root presentViewController:self.alertController animated: YES 
completion:nil]; 


n; 
} 


// 这 里 省 略 了 没有 修改 的 代码 


接着 将 React Native 组 件 ImagePicker 调 用 的 接口 改 为 launchlmageLibrary， 修 改 ImagepPickerjs 代 码 如 下 : 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 


14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32! 
33 
34 
35 
37 
38 


// 这 里 省 略 了 没有 修改 的 代码 


export default class Miage icker, extends Component { 


// 这 里 省 略 了 没有 修改 的 代码 


_selectPhotoTapped = () => { 
const options = { 
quality: 1.0, 
maxWidth: 500, 
maxHeight: 500 
le 


NativeModules.ImagePicker.launchImageLibrary (options, (response) 
=> { // 启动 图 片 库 
if (response.didCancel) ( 
console. log (' 取 消 选 择 图 片 ') ; 
} else if (response.error) { 
console.log (' 选 择 图 片 错误 : ', response.error); 


} else { 
let source; 
if (Platform.OS === 'ios') ( 
source = ( 
uri: response.uri.replace('file://', '') 
}; 
} else if (Platform.OS === 'android') { 


source = { 
uri: response.uri 
i 
this.setState ({avatarSource: source]); 


DE 
} 


// 这 里 省 略 了 没有 修改 的 代码 
} 


// 这 里 省 略 了 没有 修改 的 代码 


Imi 


重新 编译 和 运行 应 用 ， 打 开 “ 更 多 ”页 面 ， 单 击 “ 选 择 图 片 ”按钮 ， 会 打开 图 片 选 择 提示 框 ， 效 果 如 图 9.4 所 示 。 


H9.4 iOS 图 片 选 择 提 示 框 


9.22 Android 平 台 的 提示 


首先 还 是 添加 并 实现 launchlmageLibrary 接 口 ， 修 改 ImagePickerModulejava 代 码 如 下 : 


01  // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 


02 
03 public class ImagePickerModule extends ReactContextBaseJavaModule 
implements ActivityEventListener { 
04 // 这 里 省 略 了 没有 修改 的 代码 
05 
06 GReactMethod 
07 public void launchImageLibrary (final ReadableMap options, final 
Callback callback) ( 
08 Activity currentActivity = getCurrentActivity(); 
09 if (currentActivity == null) { 
10 return; 
13r } 
12 
13 // 创建 AlertDialog.Builder 
14 AlertDialog.Builder builder = new AlertDialog.Builder 
(currentActivity, android.R.style.Theme Holo Light Dialog); 
15 builder.setTitle ("相片 库 ") ; CE 
16 
17 // 设置 AlertDialog 的 Adapter 
18 final List<String> titles = new ArrayList<String>(); 
19 final List<String> actions = new ArrayList<String>(); 
20 titles.add(" 相 册 ") ; 
21 actions.add ("photo"); 
22 titles.add ("fH") ; 
23 actions .add ("camera"); 
24 titles.add ("H") ; 
25 actions.add ("cancel"); 
26 ArrayAdapter<String> adapter = new ArrayAdapter<String> 
(currentActivity, android.R.layout.select_dialog_item, titles); 
27 builder.setAdapter (adapter, new DialogInterface.OnClickListener() { 
28 public void onClick(DialogInterface dialog, int index) { 
29 mResponse = Arguments .createMap () 7 
30 String action = actions.get (index); 
31 switch (action) ( 
32 case "photo": 
33 launchImagePicker (options, callback); 
34 break; 
35 case "camera": 
36 launchCamera (options, callback); 
37 break; 
38 case "cancel": 
39 mResponse.putBoolean("didCancel", true); 
40 callback.invoke (mResponse); 
41 break; 
42 default: 
43 break; 


44 } 


45 } 


46 DE 

47 

48 // 创建 AlertDialog 

49 final AlertDialog dialog = builder.create(); 

50 dialog.setOnCancelListener (new DialogInterface.OnCancelListener() { 
51 GOverride 

52 public void onCancel(DialogInterface dialog) ( 
53 mResponse = Arguments.createMap(); 

54 dialog.dismiss(); 

55 mResponse.putBoolean("didCancel", true); 
56 callback.invoke (mResponse); 

57 } 

58 D; 

59 

60 // 显示 AlertDialog 

61 dialog.show(); 

62 j 

63 

64 // 这 里 省 略 了 没有 修改 的 代码 

65 


， 打 开 “ 更 多 ”页 面 ， 单 击 “ 选 择 图 片 ”按钮 ， 会 打开 图 片 选 择 提示 框 ， 效 果 如 图 9.5 所 示 。 


图 9.5 Android A H ARTE 


9.3” 重 构图 片 选 择 库 


至 此 已 经 开发 了 一 个 完整 的 图 片 选择 库 的 功能 ,包括 : 


片 选择 提示 框 。 


“ 从 相册 选择 


is) 


LE 


+ 用 相机 拍摄 图 片 。 


细心 的 读者 可 能 会 发 现代 码 中 存在 这 样 的 问题 : “从 相册 选择 图 片 ”和 “用 相机 拍摄 


网 


片 ”的 大 部 分 实现 是 相同 的 ， 因 此 最 后 需 


E: 
网 


片 选择 库 的 代码 。 


9.3.1 iOSs 平 台 的 重 构 


首先 定义 一 个 枚 举 类 型 ImagepPickerTarget， 用 于 表示 用 户 选择 的 是 相册 还 是 相机 ， 添 加 ImagePicker.m 代 码 如 下 : 


01 // 这 里 省 略 了 包含 的 头 文件 


02 

03 typedef NS ENUM(NSInteger, ImagePickerTarget) ( 
04 ImagePickerTargetImage = 0, 

05 ImagePickerTargetCamera 

06 n 

07 

08 // 这 里 省 略 了 没有 修改 的 代码 


然后 修改 接口 launchlmagePicker 的 参数 和 实现 ， 修 改 ImagePicker.m 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 
03 RCT EXPORT METHOD (launchImagePicker: (ImagePickerTarget)target options: 
(NSDictionary *)options) ( 
04 self.options - [NSMutableDictionary dictionaryWithDictionary: 
options]; 

05 

06 // 创建 UIImagePickerController 

07 self.picker = [[UIImagePickerController alloc] init]; 

08 if (target == ImagePickerTargetImage) { 

09 self.picker.sourceType = UlImagePickerControllerSourceType 

PhotoLibrary; 

10 } else if (target == ImagePickerTargetCamera) { 

AT: dif TARGET IPHONE SIMULATOR 

12 self.callback(G[G (G8 "error": G"Camera not available on simulator"}]); 

13 return; 

14 #else 

15 self.picker.sourceType = UlImagePickerControllerSourceType 

Camera; 

16 #endif 

17 } 

18 self.picker.mediaTypes = @[(NSString *)kUTTypeImage]; 

19 self.picker.modalPresentationStyle = UIModalPresentationCurrent 

Context; 

20 self.picker.delegate = self; 

21 

22 void (^showPickerViewController) () = ^void() { 

23 // 打开 UIImagePickerController 

24 dispatch async (dispatch get main queue(), ^{ 

25 UlViewController *root = [[[[UIApplication sharedApplication] 
delegate] window] rootViewController]; 

26 while (root.presentedViewController != nil) { 

27 root = root.presentedViewController; 

28 } 

29 [root presentViewController:self.picker animated:YES completion: 
nil]; 

30 DE 

31 B 

32 

33 if (target == ImagePickerTargetImage) { 


34 // 获取 相册 权限 


35 [self checkCameraPermissions:^(BOOL granted) { 


36 if (!granted) ( 

37 self.callback(@[@{@"error": @"Camera permissions not 
granted"}]); 

38 return; 

39 } 

40 

41 showPickerViewController (); 

42 B" 

43 } else if (target == ImagePickerTargetCamera) { 

44 // 获取 相机 权限 

45 [self checkPhotosPermissions:^(BOOL granted) { 

46 if (!granted) ( 

47 self.callback(@[@{@"error": ("Photo library permissions 
not granted"}]); 

48 return; 

49 } 

50 

5l showPickerViewController () ; 

52 n; 

53 } 

54 } 

55 

56 // 这 里 省 略 了 没有 修改 的 代码 


同时 ， 修 改 接口 launchlmageLibrary 中 的 实现 ， 修 改 ImagepPicker.m 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


02 
03 RCT EXPORT METHOD (launchImageLibrary: (NSDictionary *)options callback: 
(RCTResponseSenderBlock)callback) { 

04 self.callback - callback; 

05 

06 // 创建 UIAlertController 

07 self.alertController = [UIAlertController alertControllerWithTitle: 

HAE" message:nil preferredStyle:UIAlertControllerStyleAction 
t]; 

08 UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:Q"Hi 
i" style:UIAlertActionStyleCancel handler:^(UIAlertAction * action) { 

09 self.callback (@[@{@"didCancel": @YES}]); 

10 11; 

1i [self.alertController addAction:cancelAction]; 

12 UIAlertAction *takePhotoAction = [UIAlertAction actionWithTitle:@ 
"相册 " style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) { 

13 [self launchImagePicker: ImagePickerTargetImage options:options]; 

14 1); 

15 [self.alertController addAction:takePhotoAction]; 

16 UlAlertAction *chooseFromLibraryAction = [UIAlertAction action 
WithTitle:@" 相 机 " style:UIAlertActionStyleDefault handler:^(UIAlert 
Action * action) { 

17 [self launchImagePicker: ImagePickerTargetCamera options:options]; 

18 n 

19 [self.alertController addAction:chooseFromLibraryAction]; 

20 

21 // 打开 UIAlertController 

22 dispatch async (dispatch get main queue(), ^{ 

23 UIViewController *root = [[[[UIApplication sharedApplication] 

delegate] window] rootViewController]; 
24 [root presentViewController:self.alertController animated: YES 
completion:nil]; 

25 n; 

26 } 

27 

28 // 这 里 省 略 了 没有 修改 的 代码 


最 后 删除 废弃 的 接口 aunchCamera 以 及 相关 代码 。 


此 时 重新 编译 和 运行 应 用 ， 打 开 “ 更 多 ”页 面 ， 单 击 “ 选 择 图 片 ”按钮 ， 验 证 图 片 选择 库 的 功能 仍然 是 完整 的 。 


9.3.2 ” Android 平台 的 重 构 


首先 在 lImagePickerModule 类 中 添加 一 个 属性 mlmagePickerTargetType， 用 于 表示 当前 选择 的 是 相册 还 是 相机 ， 添 加 lImagePickerModule.java 代 码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 


02 

03 public class ImagePickerModule extends ReactContextBaseJavaModule 
implements ActivityEventListener { 

04 static final int REQUEST LAUNCH IMAGE CAPTURE = 13001; 

05 static final int REQUEST LAUNCH IMAGE LIBRARY 13002; 

06 static final int IMAGE PICKER TARGET IMAGE = 

07 static final int IMAGE PICKER TARGET CAMERA = 1; 

08 private final ReactApplicationContext mReactContext; 

09 private Callback mCallback; 

10 private WritableMap mResponse; 

11 private Uri mCameraCaptureURI; 

12 private int mImagePickerTargetType; 

13 

14 // 这 里 省 略 了 没有 修改 的 代码 

15 } 


然后 修改 接口 launchlmagePicker 的 参数 和 实现 ， 修 改 ImagePickerModule.java 代 码 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 


02 
03 public class ImagePickerModule extends ReactContextBaseJavaModule 
implements ActivityEventListener { 
04 // 这 里 省 略 了 没有 修改 的 代码 
05 
06 GReactMethod 
07 public void launchImagePicker (final ReadableMap options, final 
Callback callback) ( 
08 // 判断 设备 是 否 支持 相机 
09 if (mImagePickerTargetType == IMAGE PICKER TARGET CAMERA 
&& lisCameraAvailable()) ( T ~ 
10 return; 
11 D 
12 
13 mCallback = callback; 
14 mResponse = Arguments.createMap(); 
15 
16 Intent libraryIntent - null; 
17 if (mImagePickerTargetType == IMAGE PICKER TARGET IMAGE) { 
18 libraryIntent = new Intent (Intent.ACTION PICK, MediaStore. 
Images .Media.EXTERNAL CONTENT URI); 
19 ) else if (mImagePickerTargetType == IMAGE PICKER TARGET CAMERA) { 
20 libraryIntent = new Intent (MediaStore.ACTION IMAGE CAPTURE) ; 
21 mCameraCaptureURI = Uri.fromFile(createNewFile());_ 
22 libraryIntent.putExtra (MediaStore.EXTRA OUTPUT, 
mCameraCaptureURI) ; T 
23 } 
24 
25 try ( 
26 // 打开 相册 或 相机 


27 int requestCode = mImagePickerTargetType == IMAGE PICKER 


TARGET IMAGE ? 


28 ^ REQUEST LAUNCH IMAGE LIBRARY : REQUEST LAUNCH IMAGE 
CAPTURE; A B D T T 

29 Activity currentActivity = getCurrentActivity(); 

30 currentActivity.startActivityForResult (libraryIntent, 

requestCode); 

31 ] catch (ActivityNotFoundException e) ( 

32 e.printStackTrace(); 

33 if (mCallback != null) ( 

34 mResponse.putString("error", "Cannot launch photo 
library"); 

35 mCallback.invoke (mResponse); 

36 mCallback - null; 

37 } 

38 } 

39 } 

40 

al // 这 里 省 略 了 没有 修改 的 代码 

4 } 


同时 ， 修 改 接口 launchlmageLibrary 中 的 实现 ， 修 改 ImagePickerModulejava 代 码 如 下 : 


01  // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 


02 
03 public class ImagePickerModule extends ReactContextBaseJavaModule 
implements ActivityEventListener { 
04 // 这 里 省 略 了 没有 修改 的 代码 
05 
06 GReactMethod 
07 public void launchImageLibrary (final ReadableMap options, final 
Callback callback) ( 
08 // 这 里 省 略 了 没有 修改 的 代码 
09 ArrayAdapter<String> adapter = new ArrayAdapter<String> 
(currentActivity, android.R.layout.select dialog item, titles); 
10 builder.setAdapter (adapter, new DialogInterface.OnClickListener () { 
11 public void onClick (DialogInterface dialog, int index) { 
12 mResponse = Arguments.createMap () ; 
13 String action = actions.get (index); 
14 switch (action) ( 
15 case "photo": 
16 mImagePickerTargetType = IMAGE PICKER TARGET IMAGE; 
17 launchlmagePicker(options, callback); B 
18 break; 
19 case "camera": 
20 mImagePickerTargetType = IMAGE PICKER TARGET CAMERA; 
21 launchImagePicker (options, callback); E 
22 break; 
23 case "cancel": 
24 mResponse.putBoolean("didCancel", true); 
25 callback.invoke (mResponse); 
26 break; 
27 default: 
28 break; 
29 } 
30 } 
31 // 这 里 省 略 了 没有 修改 的 代码 
32 } 
33 
34 // 这 里 省 略 了 没有 修改 的 代码 
35 } 


最 后 删除 废弃 的 接口 launchCamera 以 及 相关 代码 。 


此 时 重新 编译 和 运行 应 用 打开“ 更 多 ”页 面 ， 单 击 “ 选 择 图 片 ”按钮 ， 验 证 图 片 选择 库 的 功能 仍然 是 完整 的 。 


Baz: 本 书 为 了 讲解 和 讨论 的 需要 ， 自 己 动手 编写 了 图 片 选 择 库 的 基本 功能 。 在 React Native 实 际 开发 中 ， 除 了 自己 编写 原生 代码 扩展 应 用 的 功能 之 外 ， 尽 量 还 是 使 用 成 熟 的 第 三 方 库 ， 例 如， 图 片 


选择 库 可 以 使 用 react-native-image-picker (https://github.com/marcshilling/react-native-image-picker) 。 


94 向 iOS 项 目 中 添加 React Native 支 持 


之 前 为 React Native 应 用 扩展 原生 功能 ， 还 是 以 React Native 开 发 为 主导 ， 然 而 很 多 项 目 已 经 使 用 了 原生 开发 ， 现 在 考虑 逐步 引入 React Native， 因 此 就 会 遇 到 如 何 向 已 有 的 原生 项 目 添加 React 
Native 支 持 的 问题 。 本 节 先 介绍 如 何 向 iOS 项 目 中 添加 React Native 支 持 。 


9.4.1 新 建 iOS 项 目 


首先 新 建 一 个 原生 项 目 。 打 开 Xcode， 选 择 Create a new Xcode Project， 然 后 在 项 目 模板 中 选择 Single View Application 项 ， 效 果 如 


网 


9.6 所 示 。 


Choose a template for your new project: 


watchOS tvOS macOS 


Application 


* 


Cross-platform 


= 


= 


"oo 
Single View Game Master-Detail Page-Based Tabbed 
Application Application Application Application 
oo N 
66 CJ 
Sticker Pack iMessage 
Application Application 
Framework & Library 
ve LA e 
: M 
Cocoa Touch Cocoa Touch Metal Library 
Framework Static Library 
Cancel Next 


接着 配置 项 目的 项 目 名 称 、 组 织 名 称 、 编 程 语言 以 及 设备 等 信息 ， 效 果 如 图 


图 9.6 ”选择 iOS 原 生 项 目 模板 


9.7 所 示 。 


Choose options for your new project: 


Product Name: AddReactNativeTolOS 
Team: None T 
Organization Name: com.learnreactnative 
Organization Identifier: learnreactnative 
Bundle Identifier: learnreactnative.AddReactNativeTolOS 
Language: Objective-C S 
Devices: iPhone v 
_ | Use Core Data 
v| Include Unit Tests 
v| Include UI Tests 
Cancel Previous Next 


94.2 ”新 建 React Native 项 目 


图 9.7 配置 iDOS 原 生 项 目 信 息 


为 了 向 上 述 iOS 原 生 项 目 中 添加 React Native 支 持 ， 通 常 先 新 建 一 个 同名 的 React Native 项 目 。 


(1) 新 建 React Native 项 目 命令 如 下 : 


react-native init AddReactNativeToIOS // 新 建 React Native 项 目 AddReact 


cd AddReactNativeToIOS 
npm install 


NativeToIOS 


(2) 删除 React Native 项 目的 ios 目 录 ， 同 时 将 iOS 原 生 项 目的 目录 名 改 为 ios 并 复制 至 React Native 项 目下 。 


(3) 使 用 Xcode 打开 ios/AddReactNativeTolOS.xcodeproj 文 件 。 单 击 Xcode 左 侧 项 目 一 栏 中 底部 的 加 号 ， 效 果 如 图 9.8 所 示 。 


(4) 选择 Add Files to“AddReactNativeTolOS” 选项， 然后 找到 该 文件 node_modules/react-native/React/React.xcodeproj， 单 击 “ 添 加 ”按钮 ， 效 果 如 图 


9.9 所 示 。 


v [5j AddReactNativeTolOS 


v Bl AddReactNativeTolOS 
h) AppDelegate.h 


m AppDelegate.m 
hl ViewController.h 
m, ViewController.m 
“| Main.storyboard 
关 Assets.xcassets 
| LaunchScreen.storyboard 
«| Info.plist 
> Supporting Files 
>| | AddReactNativeTolOSTests 
» | | AddReactNativeTolOSU!Tests 
>» | Products 


+ | om 
File... 
New Playground... 


Add Files to "AddReactNativeTolOS" ... 


9.8 添加 项 目 依赖 


P Base 今天 14:17 -" 
P3 Executors SX 14:17 x 
P3 Modules SX 14:17 - 
P3 Profiler SX 14:17 ii 
(5 React.xcodeproj 201752 R6H 16:31 254 KB 
> B Views SX 14:17 " 


wv DA * 


图 9.9 选择 依赖 的 项 目 


(5) 把 依赖 的 静态 库 加 到 链接 选项 中 ， 打 开 Xcode 工 程 Build Phases 下 的 Link Binary With Libraries 选 项 ， 单 击 加 号 ， 选 择 libReact.a from ‘React’ targetin ‘React’ project 项 ， 效 果 如 图 


(6) 按照 同样 的 方法 ， 再 添加 其 他 的 依赖 如 下 : 


e 


Folder 
Folder 
Folder 
Folder 


Xcode Project 


Folder 


9.108 


node modules/react-native/Libraries/Network/RCTNetwork.xcodeproj 
node modules/react-native/Libraries/Text/RCTText .xcodeproj 
node modules/react-native/Libraries/WebSocket/RCTWebSocket . xcodeproj 


Lia. 这 里 添加 的 依赖 只 是 React Native 开 发 中 用 到 的 基本 功能 。 如 果 想 要 在 React Native 开 发 中 使 用 Image 组 件 ， 就 需要 添加 RCTImage.xcodeproj 依 赖 。 更 多 的 依赖 项 目 还 有 : 


node modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj 
node modules/react-native/Libraries/ActionSheetlOS/RCTActionSheet.xcodeproj 
node modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj 
node modules/react-native/Libraries/Image/RCTImage.xcodeproj 

node modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj 

node modules/react-native/Libraries/Settings/RCTSettings.xcodeproj 

node modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj 

node modules/react-native-vector-icons/RNVectorIcons.xcodeproj 


Choose frameworks and libraries to add: 
Q Search 


| v [3 Workspace 
jai libcxxreact.a from 'cxxreact' target in 'React' project 
jai libcxxreact.a from 'cxxreact-tvOS' target in 'React' proj... 
jai libjschelpers.a from 'jschelpers' target in ‘React’ project 
| jai libjschelpers.a from 'jschelpers-tvOS' target in 'React'... 
| fii ibReact.a from 'React' target in ‘React' project 
| jut libReact.a from 'React-tvOS' target in 'React' project 
jai libyoga.a from 'yoga' target in 'React' project 
jai libyoga.a from 'yoga-tvOS' target in 'React' project 
v D iOS 10.1 from 'yoga-tvOS' target in 'React' project 
(a) Accelerate.framework 
E Accounts. framework 
E AddressBook.framework 
E AddressBookUI.framework 
入 AdSupport.framework 
入 AssetsLibrary.framework 
E AudioToolbox.framework 


Add Other... Cancel Add 


图 9.10 添加 Link Binary With Libraries 链 接 选项 


(7) 全 部 添加 成 功 后 ， 效 果 如 图 9.11 所 示 。 


v [Bj AddReactNativeTolOS M | [General Capabilities Resource Tags Info Build Settings Build Phases Build 
¥ AddReactNativeTolOS 
b & RCTWebSocket.xcodeproj 
> [5j RCTText.xcodeproj 
> [Bj RCTNetwork.xcodeproj 


(e 
-H G) 
=) 


» Target Dependencies (0 items) 


» b React.xcodeproj * Compile Sources (3 items) 
h AppDelegate.h 
m. AppDelegate.m Name Compiler Flac 
h ViewController.h m ViewController.m .in AddReactNativeTolOS 
m ViewController.m m. AppDelegate.m .in AddReactNativeTolOS 
Main.storyboard m) main.m ...in AddReactNativeTolOS 
E Assets.xcassets 
LaunchScreen.storyboard 
Info.plist Y Link Binary With Libraries (4 items) 
> |) Supporting Files 
> [E AddReactNativeTolOSTests — — 
b |) AddReactNat... TolOSUITests jur libRCTNetwork.a Required > 
> [T Products Smit liDRCTText.a Required ^ 
jur libRCTWebSocket.a Required > 
jur libReact.a Required > 


Drag to reorder frameworks 


图 9.11 添加 所 有 依赖 后 的 iOS 项 目 


(8 


~ 


最 后 还 需要 配置 编译 选项 ， 打 开 Xcode 工 程 Build Settings 下 的 Other Link Flags 选 项 ， 单 击 加 号 ， 添 加 -ObjC 和 -l"stdc+ + "两 项 ， 效 果 如 图 9.12 所 示 。 


-ObjC 
-|"stdc++" 


9.12 ”配置 Dther Link Flags 编 译 选项 


9.4.3 在 iOS 页 面 打 开 React Native 组 件 


完成 上 述 准备 工作 之 后 ， 就 可 以 编写 iOS 原 生 项 目 代 码 ， 让 iOS 页 面 能 够 打开 React Native 组 件 ， 以 此 来 向 iOS 项 目 中 添加 React Native 支 持 。 


(1) 首先 修改 ViewController.m 代 码 如 下 : 


01 #import "ViewController.h" 


02 #import «RCTRootView.h» 

03 

04 @interface ViewController () 

05 

06 Gend 

07 

08 @implementation ViewController 

09 

10 - (void)viewDidLoad { 

Tl [super viewDidLoad]; 

12 

13 NSString *strUrl = @"http://localhost:8081/index.ios.bundle?platform= 
ios&dev-true"; 

14 NSURL *jsCodeLocation = [NSURL URLWithString:strUrl]; 

15 #ifndef DEBUG 

16 jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" 


withExtension:@"jsbundle"]; 
17 #endif 
18 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: 


jsCodeLocation moduleName:@"AddReactNativeToIOS" initialProperties: 
nil launchOptions:nil]; 


19 rootView.frame = self.view.bounds; 
20 [self.view addSubview: rootView] ; 
21 } 

22 

23 Gend 


上 述 代码 中 的 RCTRootView 会 将 React Native 中 的 组 件 封装 成 原生 平台 的 视图 。 


(2) 此 时 ， 编 译 iOS 工 程 会 出 现 'RCTRootView.h'file not found 错 误 ， 如 图 9.13 所 示 。 


为 了 解决 找 不 到 头 文件 的 错误 ， 继 续 配置 相关 编译 选项 ， 打 开 Xcode 工 程 Build Settings 下 的 Header Search Paths 选 项 ， 单 击 加 号 ， 添 加 
$ (SRCROOT) /http://www.hzcourse.comy/resource/readBook?path=/openresources/teach_ebook/uncompressed/16424/OEBPS/VText/./node_ modules/react-native 项 ， 并 选择 recursive， 效 
果 如 图 9.14 所 示 。 


v A AddReactNativeTolOS 1 issue O 
Y © Lexical or Preprocessor Issue 


@ 'RCTRootView.h' file not found 
ViewController.m 


图 9.13 'RCTRootView.h'file not found 错 误 


<> 


$(SRCROOT)/../node. modules/react-native recursive 


图 9.14 e St Header Search Paths 编 译 选 项 


(3) 最 后 在 编译 和 运行 应 用 之 前 ， 还 需要 允许 应 用 使 用 HTTP 请 求 。 打 开 Xcode 工 程 的 Info 选 项 ， 添 加 App Transport Security Settings 并 设置 类 型 为 Dictionary， 然 后 在 该 描述 下 添加 Allow 
Arbitrary Loads 并 设置 类 型 为 Boolean 值 为 YES， 如 图 9.15 所 示 。 


Dictionary (1 item) 
Boolean YES 


v App Transport Security Settings 
Allow Arbitrary Loads 


€» <) 4 


<> 


99.15 配置 App Transport Security Settings 项 目 描述 


Aar: 关于 iOS 开 发 App Transport Security 的 更 多 介绍 ， 可 以 参考 Apple 官 方 文 档 https://developer.apple.com/library/content/releasenotes/General/WhatsNewIniOS/Articles/iOS9.html。 


终于 完成 了 所 有 配置 ! 此 时 ， 编 译 和 运行 iOS 原 生 应 用 ， 就 可 以 看 到 React Native 组 件 显示 在 原生 平台 的 页 面 中 了 ， 效 果 如 


Carrier F 10:29 AM 


Welcome to React 


图 9.16 所 示 。 


Native! 


To get started, edit index.ios.js 


Press Cmd-R to reload, 
Cmd+D or shake for dev menu 


图 9.16 React Native 组 件 显示 在 iOS 原 生 页 面 中 


95 向 Android 项 目 中 添加 React Native 支 持 
前 面 讲解 了 iOS 项 目 中 添加 React Native， 本 节 再 来 看 看 Android 项 目 中 的 添加 。 


9.5.1 新 建 Android 项 目 


首先 新 建 一 个 原生 项 目 。 打 开 Android Studio， 选 择 Start a new Android Studio project， 配 置 项 目的 应 用 名 称 、 组 织 名 称 、 以 及 项 目 路 径 等 信息 ， 效 果 如 图 9.17 所 示 。 接 着 在 之 后 所 有 的 弹出 框 中 
都 单 击 Next 按 钮 ， 直 到 完成 Android 原 生 项 目的 创建 。 


New Project 


Android Studio 


Configure your new project 


Application name AddReactNativeToAndroid 
Company domain rn.example.com 
Package name 


nclude C++ support 


Project location awin /Desktop/learnreactnative/code/AddReactNativeToAndroid 


Cancel 


图 9.17 配置 Android 原 生 项 目 信息 
9.5.2 ”新 建 React Native 项 目 


为 了 向 上 述 Android 原 生 项 目 中 添加 React Native 支 持 ， 通 常 先 新 建 一 个 同名 的 React Native 项 目 。 新 建 React Native 项 目 命令 如 下 : 


react-native init AddReactNativeToAndroid // 新 建 React Native 项 目 AddReact 

NativeToAndroid 
cd AddReactNative roid 
npm install 


然后 删除 React Native 项 目的 android/app/src 目 录 ， 同 时 将 Android 原 生 项 目的 src 目 录 复制 至 刚才 删除 的 相应 目录 。 
9.5.3 在 Android 页 面 打 开 React Native 组 件 


完成 上 述 准备 工作 之 后 ， 就 可 以 编写 Android 原 生 项 目 代 码 ， 让 Android 页 面 能 够 打开 React Native 组 件 ， 以 此 来 向 Android 项 目 中 添加 React Native 支 持 。 


(1) 新 建 MainApplication 类 ， 该 类 继承 自 android.app.Application 并 且 实 现 com.facebook.react.ReactApplication 接 口 ， 效 果 如 图 9.18 所 示 。 


Name MainApplication 
Kind Q Class 


Superclass: | android.app.Application 


Interface(s) com.facebook.react.ReactApplication 


Package com.example.rn.addreactnativetoandroid 
Visibility e Public Package Private 


None Abstract 


Show Select Overrides Di 


Cancel 


918 在 Android 工 程 中 新 建 MainApplication 类 


(2) 添加 MainApplicationjava 代 码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 android Studio 会 自动 导入 所 依赖 的 模块 

02 

03 public class MainApplication extends Application implements React 

Application { 

04 

05 private final ReactNativeHost mReactNativeHost = new React 
NativeHost(this) { 

06 GOverride 

07 public boolean getUseDeveloperSupport() { 

08 return BuildConfig.DEBUG; 

09 } 

10 

11 @Override 

12 protected List<ReactPackage> getPackages() { 

13 return Arrays.<ReactPackage>asList ( 

14 new MainReactPackage () 

15 ); 

16 H 

17 

18 

19 GOverride 

20 public ReactNativeHost getReactNativeHost() ( 

21 return mReactNativeHost; 

22 } 

23 

24 @Override 

25 public void onCreate() { 

26 super.onCreate (); 

27 SoLoader.init (this, /* native exopackage */ false); 

28 } 

29 

30 } 


(3) 在 Android 工 程 的 AndroidManifest.xml 文 件 中 注册 MainApplication : 


react-native init AddReactNativeToAndroid // 新 建 React Native 项 目 AddReact 
NativeToAndroid 
<application 
android:name-".MainApplication" 
// 这 里 省 略 了 没有 修改 的 配置 
</application> 


(4) 在 MainActivity 中 添加 一 个 跳 转 到 使 用 React Native 组 件 页 面 的 按钮 ， 修 改 activity main.xml 代 码 如 下 : 


01 <LinearLayout xmlns:android-"http://schemas.android.com/apk/res/android" 
02 android:layout width-"match parent" 

03 android:layout height-"match parent" 

04 android:orientation-"vertical"» 

05 

06 «Button 


07 android: id="@+id/button" 


08 android:layout width-"match parent" 


09 android:layout height-"wrap content" 

10 android:text=" 条 开 使 用 React Native 组 件 的 页 面 "/> 
11 

12 </LinearLayout> 


此 时 ， 重 新 编译 和 运行 应 用 ， 页 面 的 效果 如 图 9.19 所 示 。 


(5) 准备 好 上 述 页 面 和 功能 后 ， 就 可 以 添加 一 个 新 的 使 用 React Native 组 件 的 SecondActivity， 该 类 继承 自 com.facebook.react.ReactActivity， 添 加 SecondActivityjava 代 码 如 下 : 


01 // 这 里 省 略 了 导入 文件 的 代码 ， 因 为 Androiq Studio 会 自动 导入 所 依赖 的 模块 
02 

03 public class SecondActivity extends ReactActivity { 

04 

05 GOverride 

06 protected String getMainComponentName() ( 

07 return "AddReactNativeToAndroid"; 

08 } 

09 

10 } 


(6) 不 要 忘记 在 Android 工 程 的 AndroidManifest.xml 文 件 中 注册 SecondActivity: 


<activity android:name=".SecondActivity"></activity> 


(7) 在 编译 和 运行 应 用 之 前 ， 还 需要 请 求 网 络 权 限 ， 在 Android 工 程 的 AndroidManifest.xml 文 件 中 添加 如 下 配置 : 


<uses-permission android:name-"android.permission.INTERNET" /> 


终于 完成 了 所 有 配置 ! 此 时 编译 和 运行 Android 原 生 应 用 ， 单 击 “ 打 开 使 用 REACT NATIVE 组 件 的 页 面 ”按钮 ， 就 可 以 跳 转 到 使 用 React Native 组 件 的 页 面 中 了 ， 效 果 如 图 9.20 所 示 。 


AddReactNativeToAndroid 


打开 使 用 REACT NATIVE 组 件 的 页 面 


图 9.19 Android 原生 工程 页 面 效果 


di ta 11:40 | 


Welcome to React Native! 


To net started edit index Android is 


vw Es wv se INI OIL en dE LI 


Double tap R on your keyboard to reload, 
Shake or press menu button for dev menu 


19.20 4% Jf] React Native 组 件 的 Android 原 生 页 面 


Lise 想 要 运行 React Native 应 用 ， 不 要 忘记 启动 React Native 服 务 。 


通过 本 章 的 学 习 ， 想 必 读 者 对 基于 原生 的 React Native 功 能 扩展 有 了 “矛盾 ”的 感情 : 


< 一面 是 原生 开发 对 React Native 应 用 具有 极 大 的 扩展 能 力 。 


:一面 是 除了 已 经 掌握 的 React Native 开 发 ， 还 要 了 解 很 多 原生 开发 的 知识 。 


其 实 读者 大 可 放心 ， 因 为 通常 情况 下 总 能 找到 其 他 开发 者 共享 的 成 果 。 例 如 ， 图 片 选择 库 的 例子 就 可 以 使 用 react-native-image-picker (https://github.com/marcshilling/react-native-image- 
picker) 。 


CR 想 要 查找 更 多 第 三 方 组 件 ， 可 以 参考 本 书 第 三 方 组 件 中 介绍 的 GitHub (https://github.com/) 以 及 JS.COACH (https:/ /js.coach/react-native). o 


本 章 的 作用 更 多 是 扩展 读者 对 React Native 开 发 的 技术 视野 ， 了 解 更 多 在 React Native 实 际 开发 中 解决 问题 的 思路 和 方法 。 例 如 ， 通 过 9.4 节 和 9.5 节 向 已 有 原生 项 目 添 加 React Native 支 持 的 介绍 ， 可 
以 在 复 用 原 有 原生 项 目的 基础 之 上 ， 引 入 React Native 跨 平台 开发 的 优势 。 


98108: 电 商 App 的 复 盘 


不 知 不 觉 ， 我 们 已 经 使 用 React Native 完 成 了 一 个 电 商 类 应 用 的 开发 。 在 这 个 过 程 中 ， 每 一 章 都 是 一 个 新 的 起 点 ， 也 是 一 次 对 React Native 相 关 知识 由 浅 入 深 的 积累 。 


“ 第 1 章 为 什么 要 学 习 React Native: 介绍 了 React Native 的 由 来 、 优 势 ， 使 读者 理解 为 何 要 学 习 React Native， 然 后 介绍 了 React Native 基 本 工具 的 使 用 ， 以 及 React Native 项 目的 基本 结构 ， 使 读者 了 解 
React Native 开 发 的 基本 流程 和 方法 。 


“ 第 2 章 ”全 局 解析 React Native 开 发 的 基础 技术 : 介绍 了 React Native 更 多 工具 的 使 用 ， 并 且 着 手 开发 电 商 类 应 用 的 页 面 ， 熟 悉 React Native 页 面 开发 的 方法 。 

- 第 3 章 React Native 的 组 件 (1) : 深入 介绍 了 React Native 组 件 ， 掌 握 React Native 组 件 和 页 面 开发 的 更 多 方法 和 技巧 。 

“ 第 4 章 React Native 的 组 件 (2) : 介绍 了 支持 特定 平台 的 组 件 ， 并 分 别 介 绍 了 iOS 平 台 下 的 使 用 和 Android 平 台 下 的 使 用 。 

“第 5 章 原生 平台 的 适 配 和 调试 : 分 别 介绍 了 iOS 平 台 和 Android 平 台 下 的 适 配 方法 和 调试 技巧 。 

. 第 6 章 React Native 的 服务 器 端 处 理 : 介绍 了 基于 Node.js 的 服务 器 开发 ， 以 及 React Native 应 用 和 服务 器 交互 的 fetch API， 使 读者 掌握 React Native 应 用 网 络 开发 的 完整 流程 。 
-ATÈ 常用 React Native API: 深入 介绍 了 React Native API， 使 读者 熟练 掌握 React Native API， 为 应 用 开发 更 多 更 强大 的 功能 。 


“ 第 8 一 9 章 React Native 与 原生 平台 混合 编程 : 介绍 了 原生 代码 和 React Native JavaScript API 的 协同 开发 。 这 样 不 仅 可 以 基于 React Native 平 台 的 组 件 和 API 进 行 应 用 开发 ， 还 可 以 依赖 原生 平台 扩展 更 多 
更 强大 的 功能 。 


从 知识 结构 来 看 ， 上 述 章节 已 经 涉及 React Native 开 发 的 各 个 方面 。 而 本 章 将 对 我 们 开发 的 电 商 App 做 一 个 完整 的 回顾 和 系统 的 剖析 ， 作 为 “ 复 盘 ” ， 让 读者 对 React Native 应 用 有 一 个 架构 性 的 理 
解 。 


以 第 8 ~ 9 中 章 的 ch07 工 程 为 例 ， 从 App 的 文件 组 成 来 回顾 电 商 App。 


D ch07 工 程 包括 了 完整 的 功能 ， 如 果 没有 特别 说 明 ， 本 章 都 是 以 ch07 工 程 为 例 。 


我 们 开发 的 React Native 应 用 的 文件 主要 有 以 下 3 个 部 分 : 


+ JavaScript x: fF « 


'iOS 原 生 代码 文件 。 


+ Android 原 生 代码 文件 。 


首先 来 看 电 商 应 用 的 所 有 JavaScript 文 件 ， 如 图 10.1 所 示 。 


图 10.1 


这 些 Javascript 文 件 的 作用 如 表 10.1 所 示 。 


表 10.1 ch07 工 程 中 JavaScript 文 件 的 作用 


x 1E 


app.js, detail.js, more.js 平台 通用 的 组 件 
home.ios.js, l home.android.js, index.ios.js, index.android.js, | ss 台 特 定 的 组 件 
main.ios.js, main.android.]s 

Animation.js HE X 2H fF 
Communication.js, Deviceinfo.js, ImagePicker.js, Platform.js, Screen.js HAE X. API 


10.1.2 iOSEAEFGIB CE 


iOS 原 生 代码 文件 如 图 10.2 所 示 。 


v |] ch07 
main.jsbundle 
hi AppDelegate.h 
m AppDelegate.m 
[| Images.xcassets 
Info.plist 
*| LaunchScreen.xib 
m, main.m 
hi Devicelnfo.h 
m, Devicelnfo.m 
hi ImagePicker.h 
m ImagePicker.m 
h), Communication.h 
m Communication.m 
h) CommunicationViewController.h 
m. CommunicationViewController.m 


这 些 iOs 原 生 代码 文件 的 作用 如 表 10.2 所 示 。 


表 10.2 ch07 工 程 中 iOS 原 生 代码 文件 的 作用 


x OF 作 用 
Devicelnfo.h, DeviceInfo.m, ImagePicker.h, ImagePicker.m, React Native 自 定义 API 的 iOS 原 生 代码 
Communication.h, Communication.m 
CommunicationViewController.h, 
Communication ViewController.m 
ir AppDelegate.m,Images.xcassets, LaunchScreen.xib, iOS 平 台 相关 文件 和 资源 


iOS Jt [fi] 


Android 原 生 代码 文件 如 图 10.3 所 示 。 


v (java 
Y z[:Jcom.ch07 


Communication 


© © 


CommunicationActivity1l 
CommunicationModule 
Devicelnfo 
DeviceInfoModule 
magePicker 
magePickerModule 
MalinActivity 


Q 
O 
Q 
O 
O 
Q 
O 


MainApplication 


图 10.3 ch07 工 程 中 Android 原 生 代码 文件 


这 些 Android 原 生 代码 文件 的 作用 如 表 10.3 所 示 。 


表 10.3 ch07 工 程 中 Android 原 生 代 码 文件 的 作用 


x ^f 1E H 
Communication.java, CommunicationModule.java, Devicelnfo. 
java, DevicelnfoModule.java, ImagePickerjava, ImagePicker | React Native 自 定义 API 的 Android 原 生 代 码 
Module.java 
CommunicationActivity1.java, MainActivity.java Android 页 面 
MainApplication.java Android 平 台 相 关 文 件 


10.2 电 商 App 的 结构 


通常 应 用 (也 包括 这 里 的 React Native 应 用 ) 主要 由 以 下 3 部 分 构成 : 
:页面 显示 和 布局 。 
“ 数据 和 网 络 。 
BAe 


组 成 结构 如 图 10.4 所 示 。 


页 面 显示 和 布局 


逻辑 控制 


图 10.4 应 用 的 结构 


本 节 就 来 详细 分 析 应 用 的 这 3 个 组 成 部 分 。 


10.2.1 ”Flexbox 的 整体 布局 


Flexbox 布 局 是 React Native 应 用 的 基础 和 重点 ， 因 此 首先 就 来 梳理 电 商 App 的 Flexbox 整 体 布 局 。 以 电 商 App 的 首页 为 例 ，Flexbox 的 整体 布局 如 图 10.5 所 示 。 


flex=1 flex=1 


"TU: 搜索 框 


height=40 


height=180 


height=60 ”商品 列表 每 一 行 


flex=1 商品 列表 


屏幕 宽度 


图 10.5 首页 的 Flexbox 布 局 


其 中 ， 商 品 列表 每 一 行 的 Flexbox 布 局 如 图 10.6 所 示 。 


height=60 


屏幕 宽度 
商品 列表 每 一 行 


图 10.6 ”商品 列表 每 一 行 的 Flexbox 布 局 


这 里 需要 提醒 读者 的 是 ， 如 果 使 用 如 NativeBase 这 样 的 第 三 方 组 件 库 ， 那 么 常用 组 件 的 Flexbox 布 局 就 不 需要 自己 实现 了 ， 从 而 可 以 大 大 节约 设计 和 开发 的 成 本 。 


Las 关于 NativeBase 第 三 方 组 件 库 的 详细 介绍 ， 读 者 可 以 参考 本 书 4.2 节 。 


10.2.2 ”应 用 的 逻辑 结构 


在 了 解 了 页 面 和 布局 之 后 ， 接 着 来 看 应 用 启动 时 的 逻辑 ， 如 图 10.7 所 示 。 


I: 上 述 远 辑 以 iOS 平 台 为 例 ， 其 中 ，TabBarIOS 组 件 是 iOS 平 台 的 组 件 ，Android 平 台 的 逻辑 和 iOS 平 台 类 似 ， 只 需要 将 TabBarIOS 组 件 替换 成 ViewPagerAndroid 组 件 即 可 。 


在 应 用 启动 之 后 ， 页 面 控制 和 跳 转 的 逻辑 如 图 10.8 所 示 。 


使 用 Navigato 


Navigator 组 件 


注册 根 组 件 | ”启动 M 使 用 TabBarlOS 组 件 


原生 平台 TabBarIOS 组 件 


图 10.7 应 用 启动 的 还 辑 


使 用 Navigator 


Home 组 件 Detail 组 件 


TabBarlOS 组 件 


More 组 件 


图 10.8 ”页 面 控制 和 跳 转 的 逻辑 


其 中 ，Home 组 件 和 More 组 件 是 通过 TabBarlOS 组 件 来 控制 和 切换 的 ， 当 单 击 Home 组 件 中 的 商品 列表 时 ， 通 过 Navigator 组 件 来 实现 Detail 组 件 的 跳 转 。 


Cuz: 关于 Navigator 组 件 的 详细 介绍 ， 读 者 可 以 参考 本 书 3.6 节 。 


10.2.3 ”应 用 的 通信 过 程 


除了 页 面 布 局 以 及 应 用 逻辑 之 外 ， 应 用 还 需要 处 理 和 服务 器 的 数据 交互 。 在 本 书 6.4 节 中 使 用 了 fetch APl 来 实现 数据 交互 ， 如 图 10.9 所 示 。 


从 服务 器 获取 的 数据 还 可 以 保存 到 本 地 ， 以 提升 应 用 的 体验 ， 例 如 ， 当 网 络 断 开 或 正在 获取 数据 时 ， 可 以 将 之 前 保存 在 本 地 的 数据 显示 出 来 ， 如 图 10.10 所 示 。 


HTTP 响 应 


React Native 应 用 服务 器 


读 取 本 地 数据 请 求 网 络 数 据 


失败 
应 用 的 数据 流程 


存储 到 本 地 


读 取 本 地 数据 


除了 上 述 与 服务 器 、 数 据 库 的 数据 交互 之 外 ， 还 有 页 面 间 的 数据 通信 ， 如 图 10.11 所 示 


传递 数据 
props 


返回 数据 


callback 


其 中 


“ 上 一 级 页 面 传递 数据 到 下 一 级 页 面 : 基于 props 属 性 〈 关 于 props 的 详细 介绍 ， 读 者 可 以 参考 本 书 2.6.4 节 ) 


“ 下 一 级 页 面 返回 数据 到 上 一 级 页 面 : 基于 props 属 性 和 回调 函数 〔( 关 于 回调 函数 的 详细 介绍 ， 读 者 可 以 参考 本 书 6.5.2 节 ) 。 


10.3 ”优化 和 改进 


回顾 完 应 用 的 整体 架构 和 流程 ， 最 后 再 来 审视 一 下 我 们 的 应 用 ， 看 看 还 有 哪些 方面 可 以 改进 。 


- 从 工程 和 结构 来 看 : 可 以 按照 功能 和 模块 划分 工程 结构 。 例 如 ， 图 片 都 放 到 images 文 件 夹 下 ， 自 定义 实现 的 JavaScript API 可 以 放 至 相应 的 apis 文 件 夹 下 。 


“ 从 页 面 和 体验 来 看 : 应 用 的 整体 配色 需要 统一 起 来 ， 样 式 和 设计 可 以 向 成 熟 的 第 三 方 库 组 件 靠 扰 ， 例 如 本 书 4.2 节 中 使 用 的 NativeBase。 


' 从 文件 和 组 件 来 看 : 公用 的 组 件 和 人 逻辑 尽量 封装 和 复 用 。 例 如 ，index.android.js 和 index.ios.js 中 的 大 部 分 组 件 、 样 式 以 及 逻辑 都 是 相同 的 ， 因 此 可 以 考虑 复 用 这 部 分 实现 。 


“ 从 网 络 和 数据 来 看 : 所 有 与 服务 器 交互 的 接口 可 以 单独 封装 成 一 个 network 的 模块 ， 所 有 与 数据 库 交 互 的 逻辑 可 以 单独 封装 成 一 个 db 的 模块 。 


+ 从 整体 的 架构 来 看 : 页 面 间 的 数据 通信 和 流程 可 以 使 用 基于 redux (https://github.com/reactjs/redux) 的 设计 。 


10.3.1 redux 是 什么 


这 里 笔者 就 以 redux 为 例 ， 来 介绍 React Native 的 一 种 最 常用 的 架构 方法 来 改进 React Native 应 


简单 来 说 ，redux 是 一 个 用 于 管理 React 应 用 状态 的 容器 。 对 于 这 个 定义 ， 读 者 需要 注意 以 下 两 点 。 


+ React 应 用 : redux 不 仅仅 可 以 适用 于 React Native 应 用 ， 也 适用 于 前 端的 React 应 用 。 当 然 这 是 因为 React Native 也 采用 了 React 的 响应 式 设 计 。 


' 管理 状态 的 容器 : 状态 在 React 应 用 以 及 React Native 应 用 中 指 的 是 state， 当 修改 state 的 值 时 ，React 应 用 以 及 React Native 应 用 就 会 自动 做 出 响应 ， 更 新 组 件 。 


那么 是 否 可 以 不 使 用 redux， 自 己 来 管理 应 用 状态 呢 ? 答案 是 也 可 以 ， 例 如 ， 本 书 开发 的 React Native 应 


但 是 在 实际 开发 中 ， 随 着 应 用 功能 的 增加 ， 需 要 维护 的 状态 也 越 来 越 复 杂 ， 例 如 ， 网 络 数据 、UI 更 新 、 本 
redux 就 是 为 了 方便 开发 者 解决 这 些 问题 ， 将 所 有 的 变化 进行 统一 的 流程 处 理 ， 使 应 用 的 状态 变化 清晰 可 见 。 


使 用 redux 架 构 有 如 下 3 个 原则 。 


' 单一 数据 源 : 应 用 中 所 有 state 以 对 象 树 形式 存储 在 一 个 store 中 。 
“state 状 态 只 读 : 唯一 改变 state 的 方法 是 action。 


' 纯 函 数 执行 修改 : 通过 action 触 发 reducers 来 改变 state 树 。 


10.3.2 redux 代 码 示例 


也 许 读者 对 于 上 述 redux 的 介绍 还 是 很 困惑 


(1) 使 用 React Native 命 令 行 工具 来 初始 化 一 个 新 的 ch08 项 


就 是 自己 修改 和 维护 state 状 态 的 。 


也 数据 存储 等 ， 这 些 都 是 在 React Native 应 F 


因此 下 面 将 通过 redux 实 现 修 改 应 用 主题 的 功能 来 进一步 认识 redux 架 构 。 


中 需要 处 理 的 ， 而 且 这 些 大 多 是 异步 操作 。 


react-native init ch08 


(2) 将 redux 相 关 的 第 三 方 库 添加 到 ch08 项 目 中 ， 安 装 的 命令 如 下 : 


npm install --save redux 
npm install --save react-redux 


(3) 按照 redux 的 3 个 原则 分 别 添加 action 和 reducers。 


新 建 actions 文 件 夹 并 在 该 文件 夹 下 添加 theme.js 文 件 ， 修 改 actions/theme.js 代 码 如 下 : 


01 export const ACTION LIGHT = 'action light'; 
02 export const ACTION DARK = 'action dark'; 

03 

04 export function setLightTheme() ( 

05 return {type: ACTION LIGHT]; 

06 H 

07 

08 export function setDarkTheme() ( 

09 return (type: ACTION DARK); 

10 l 


新 建 reducers 文 件 夹 并 在 该 文件 夹 下 添加 index.js 和 theme.js 文 件 ， 修 改 reducers/index.js 代 码 如 下 : 


01 import (combineReducers) from 'redux'; 

02 

03 import theme from './theme'; 

04 

05 export default combineReducers ({theme}) ; 


修改 reducers/theme.js 文 件 代 码 如 下 : 


01 import (ACTION LIGHT, ACTION DARK) from 'http://www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16424/OEBPS/Text/. ./actions/theme'; 


03 export type State = { 
04 themeState: string 


05 if 


06 

07 const initialState = ( 

08 themeState: 'light' 

09 i 

10 

11 export default function(state : State = initialState, action) : State { 

12 switch(action.type) { 

13 case ACTION_LIGHT: 

14 return { 

15 http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/16424/OEBPS/Text/...state, 
16 themeState: 'light' = 
17 i 

18 case ACTION_DARK: 

19 return { 

20 http: //www.hzcourse.com/resource/readBook?path=/openresources/teach_ebook/uncompressed/16424/OEBPS/Text/...state, 
21 themeState: 'dark' 

22 n 

23 default: 

24 return state 

25 } 

26 } 


添加 完 action 和 reducers 之 后 ， 还 需要 将 redux 应 用 到 React Native 应 用 的 根 组 件 ， 修 改 index.ios.js 和 index.android.js 代 码 如 下 : 


01 import React, (Component) from 'react'; 
02 import (AppRegistry) from 'react-native'; 


04 import (createStore) from 'redux'; 
05 import (Provider) from 'react-redux'; 


07 import reducers from './reducers'; 
08 import App from './app'; 


10 class ch08 extends Component ( 

11 constructor() { 

12 super(); 

13 this.state = ( 

14 Store: createStore (reducers) 
15 ti 

16 } 


18 render() { 

19 return ( 

20 <Provider store={this.state.store}> 
21 <App></App> 

22 </Provider> 


25 } 


27 AppRegistry.registerComponent ('ch08', () => ch08); 


(4) 在 根 组 件 中 引用 的 App 组 件 ， 在 appjs 文 件 中 定义 ， 相 应 代码 如 下 : 


01 import React, (Component) from 'react'; 

02 import (AppRegistry, StyleSheet, Text, View, Button) from 'react- 
native'; 

03 

04 import (connect) from 'react-redux'; 

05 

06 import reducers from './reducers'; 

07 import (setLightTheme, setDarkTheme) from './actions/theme'; 

08 

09 class app extends Component { 

10 render() ( 

dp return ( 

12 «View style={styles.container}> 

13 «Text style={styles.theme}> 

14 当前 主题 : (this.props.theme.themeState) 

15 «/Text» 

16 «Button title=' 设 置 1ight 主 题 

17 onPress={this.props.onLightThemeClick}></Button> 

18 «Button title=' 设 置 1ight 主 题 " 

19 onPress={this.props.onDarkThemeClick}></Button> 

20 </View> 

21 ig 

22 } 

23 } 

24 

25 const styles = StyleSheet.create ({ 

26 container: { 

27 flex: 1, 

28 justifyContent: 'center', 

29 alignItems: 'center', 

30 backgroundColor: '#F5FCFF' 

31 ty 

32 theme: { 

33, fontSize: 20, 

34 textAlign: 'center', 

35 margin: 10 

36 H 

37 ); 

38 

39 const mapStateToProps = (state) => ( 

40 return (theme: state.theme] 

41 } 


1 


43 const mapDispatchToProps = (dispatch) => { 

44 return { 

45 onLightThemeClick: () => dispatch (setLightTheme()), 
46 onDarkThemeClick: () => dispatch (setDarkTheme () ) 


48 } 


50 export default connect (mapStateToProps, mapDispatchToProps) (app) ; 


上 述 代 码 中 ， 通 过 connect () 方法 将 action 定 义 的 函数 和 redux store 中 的 state 状 态 映射 成 了 App 组 件 的 属性 。 


(5) 重新 编译 和 运行 应 用 ， 效 果 如 图 10.12 所 示 。 


单 击 “ 设 置 ight 主 题 ” 或 “设置 drak 主 题 ”按钮 ， 就 可 以 改变 当前 的 主题 ， 效 果 如 图 10.13 所 示 。 


na from! -B081 


= By ER: light 
设置 light 主 题 
设置 dark 主 题 


Carrier F 10:57 AM 


当前 主题 : dark 
设置 light 主 题 
设置 dark 主 题 


图 10.13 ”基于 redux 的 切换 主题 功能 


通常 ， 应 用 会 有 多 个 组 件 或 页 面 ， 那 么 就 可 以 按照 App 组 件 的 写法 添加 更 新 主题 的 逻辑 。 这 样 当主 题 设置 改变 时 ， 所 有 组 件 或 页 面 的 主题 都 会 随 之 更 新 。 


从 这 个 例子 可 以 看 出 : 基于 redux 的 设计 和 效率 确实 优 于 自己 维护 state 状 态 ， 以 及 通过 props 属 性 和 回调 函数 实现 的 页 面 间 数据 通信 。 
10.3.3 redux 生 态 


除了 基于 redux 架 构 来 管理 我 们 应 用 的 state 状 态 ，redux 还 可 以 通过 使 用 中 间 件 实现 更 多 强大 的 功能 。 例 如 ， 当 state 发 生变 化 时 ， 可 以 添加 一 些 打 印信 息 用 于 调试 和 跟踪 ， 修 改 index.iosjs 和 
index.androidjs 代 码 如 下 : 


01 import React, (Component) from 'react'; 

02 import {AppRegistry} from 'react-native'; 

03 

04 import (createStore, applyMiddleware] from 'redux'; 
05; import (Provider) from 'react-redux'; 

06 

07 import reducers from './reducers'; 

08 import App from './app'; 

09 

10 const logger = store => next => action => { 

11 console.log('dispatching', action); 

12 let result = next (action); 

13 return result; 

14 } 

15 let middlewares = [logger]; 

16 let createAppStore = applyMiddleware (http: //www.hzcourse.com/resource/readBook?path-/openresources/teach ebook/uncompressed/16424/OEBPS/Text/...middlewares) (createStore 
17 

18 class ch08 extends Component ( 

19 constructor() { 

20 super(); 

21 this.state = { 

22 store: createAppStore (reducers) 
23 ] 7 

24 } 

25 

26 render() { 

27 return ( 

28 <Provider store={this.state.store}> 
29 <App></App> 

30 </Provider> 

31 ) 7 

32 ] 

33 } 

34 

35 AppRegistry.registerComponent ('ch08', () => ch08); 


上 述 代码 中 使 用 applyMiddleware () 函数 来 为 创建 的 redux store 添 加 logger 中 间 件 。 


重新 加 载 应 用 ， 打 开 Debug JS Remotely 调 试 选项 ， 然 后 单 击 “ 设 置 light 主 题 ”或 “设置 drak 主 题 ” 按 钮 ， 就 可 以 看 到 此 时 打印 的 调试 信息 ， 效 果 如 图 10.14 所 示 。 


dispatching Y 0bject 
type: "action dark" 
> proto_: Object 
dispatching Y Object 
type: "action light" 
= proto : Object 


图 10.14 tedux 的 logger 中 间 件 


除了 上 述 我 们 自己 实现 的 logger 中 间 件 之 外 ， 还 有 很 多 第 三 方 库 可 以 使 用 。 


+ tedux-thunk (https://github.com/gaearon/redux-thunk) : 一 个 流行 的 redux 异 步 action 中 间 件 。 


- redux-saga. (https://github.com/redux-saga/redux-saga) : 用 于 管理 redux 应 用 异步 操作 的 中 间 件 。 


+ redux-persist (https://github.com/rt2zz/redux-persist) : 持久 化 存储 state 的 中 间 件 。 
- redux-form (https://github.com/erikras/redux-form) : 一 个 基于 redux 的 表单 。 
+ redux-devtools (https://github.com/gaearon/redux-devtools) : 用 来 实时 监控 redux 的 状态 store 的 远程 调试 工具 。 


- redux-react-native-i18n (https://github.com/derzunov/redux-react-native-i18n) : 基于 redux 的 国际 化 解决 方案 。 


从 这 些 第 三 方 库 可 以 看 出 ，redux 已 经 不 仅仅 是 一 个 第 三 方 库 或 React 应 用 架构 方案 ， 已 经 形成 了 一 个 基于 redux 的 完成 生态 系统 ， 包 括 组 件 、 异 步 处 理 、 存 储 、 调 试 、 国 际 化 等 一 系列 功能 。 


Asz: 想 要 了 解 rtedux 生 态 的 更 多 内 容 ， 读 者 可 以 参考 开源 项 目 redux-ecosystem-links (https://github.com/markerikson/redux-ecosystem-links) 。 


10.4 用 到 的 组 件 


第 3~4 章 着 重 介绍 了 React Native 组 件 的 使 用 ， 分 别 有 : 


: View; 

* Text; 

* TextInput; 

* Button; 

+ ScrollView ; 

+ ListView; 

+ Alert; 

* TouchableHighlight; 
+ StatusBar ; 

+ RefreshControl ; 

“ Image; 

* Navigator; 

* TouchableOpacity ; 
+ TabBarlOS/ViewPagerAndroid ; 
+ ActivityIndicator; 

: MapView; 

+ Picker; 

+ Slider; 

+ Switch; 


”WebView。 


但 是 相 比 React Native 庞 大 的 组 件 库 ， 还 有 一 些 本 书 没有 涉及 。 对 于 这 些 组 件 ， 大 致 可 以 分 为 以 下 3 类 。 


“平台 特定 组 件 : DataPickerIOS、DrawerLayoutAndroid、NavigatorIOS、PickerIOS、ProgressBarAndroid、ProgressViewIOS、SegmentedControllOS、ToolbarAndroid。 由 于 这 些 组 件 只 针对 特定 平台 有 效 ， 
所 以 通常 情况 下 ， 笔 者 不 推荐 使 用 这 些 组 件 。 


“ 细节 和 体验 优化 组 件 : KeyboardAvoidingView。 这 类 组 件 可 以 提升 用 户 体验 ， 本 书 主要 介绍 组 件 的 基本 功能 和 使 用 ， 因 此 没有 详细 介绍 。 


“ 可 以 使 用 第 三 方 代替 组 件 : Modal。 这 些 组 件 可 以 使 用 简单 易 用 的 第 三 方 库 代 替 ， 例 如 ， 弹 出 框 第 三 方 库 可 以 使 用 react-native-dialogs (https://github.com/aakashns/react-native-dialogs) 或 react-native- 


popup-dialog (https:/ /github.com/jacklam718/react-native-popup-dialog) o 


hi 


虽然 上 述 组 件 本 书 没有 详细 介绍 ， 但 是 笔者 认为 读者 在 掌握 本 书 介绍 的 React Native 知 识 之 后 ， 完 全 有 能 力 自己 学 习 和 使 用 这 些 组 件 。 


10.5 小 结 


本 章 对 我 们 开发 的 React Native 应 用 做 了 一 个 完整 的 总 结 和 回顾 ,包括 : 


“ 项 目的 文件 和 结构 。 


“ 页 面 的 整体 布局 。 


“应 用 的 逻辑 。 


+ 数据 通信 和 本 地 存储 。 


同时 ， 本 章 还 介绍 了 redux 架 构 及 其 生态 ， 为 复杂 React Native 应 用 的 设计 和 架构 提供 了 思路 。 


至 此 ，React Native 应 用 开发 阶段 的 所 有 内 容 都 已 经 呈现 在 读者 的 面前 。 


第 4 篇 “App 的 发 布 和 更 新 


第 11 章 App 的 发 布 


第 12 章 ”App 的 热 部 署 


第 11 章 App 的 发 布 


当 完 成 React Native 应 用 的 开发 工作 之 后 ， 就 需要 将 应 用 打包 发 布 到 应 用 商店 。 
"iOS 应 用 商店 : App Store (http://www.apple.com/cn/itunes/charts/) o 


- Android 应 用 商店 : Google Play (https://play.google.com/store) 、 腾 讯 应 用 宝 (http://sj.qq.com/) 、 百 度 手 机 助手 (http://shouji.baidu.com/) 、360 手 机 助手 (http://sj.360.cn/) 、 小 米 商 店 
(http://app.mi.com/) 等 。 


通过 打包 发 布 ， 最 终 让 用 户 能 够 在 自己 的 手机 上 下 载 、 安 装 和 使 用 我 们 的 App。 本 章 主 要 内 容 就 是 以 上 两 部 分 。 


11.1 App Store 苹果 应 用 商店 


关于 如 何 发 布 iOS 应 用 到 App Store， 苹 果 官 方 有 详细 的 介绍 和 说 明 ， 文 档 地址 如 下 : 


如 图 11.1 描 述 了 iOS 应 用 发 布 的 主要 流程 。 


Develop Distribute 
Enroll in Develop em Upload Beta Test 
Program App Record App App 


Submit Release 


| A App 
| | Member Center | | Xcode | | iTunes Connect = 


图 11.1 iOS 应 用 发 布 流程 


Cus. 811.13] A Apple E Zr AA A4 Xobhitps://developer.apple.com/ library /content/documentation/IDEs/Conceptual/ AppDistributionGuide/Introduction/Introduction.html., 
和 普通 的 iOS 应 用 一 样 ， 发 布 React Native 应 用 生成 的 iOS 安 装 包 也 有 以 下 几 个 步骤 。 

“ 加 入 开发 者 计划 。 

. 生成 证 书 文件 (包括 生成 发 布 证 书 、 注 册 App ID、 生 成 描述 文件 ) 。 

“ 打包 应 用 。 


“发布 到 App Store 上 。 


11.1.1. 加 入 开发 者 计划 


加 入 开发 者 计划 主要 有 两 个 条 件 : Apple 1D 以 及 缴纳 费用 。 
1. 注册 Apple ID 


首先 我 们 需要 一 个 Apple ID， 打 开 Apple ID 的 注册 地 址 https://appleid.apple.com/account#I&page=create， 效 果 如 图 11.2 所 示 。 


Create Your Apple ID 


One Apple ID is all you need to access all Apple services. 
Already have an Apple ID? Find it here» 


name@example.com o 


password 


confirm password 


first name | last name 


birthday Q 


图 11.2 注册 Apple ID 


然后 按照 网 站 的 说 明和 要 求 ， 填 写 相关 信息 完成 注册 。 成 功 注册 Apple 1D 之后， 打开 Apple Developer (https://developer.apple.com/) ， 效 果 如 图 11.3 所 示 。 


é Developer Discover Design Develop Distribute Support Account 


图 11.3 Apple Developer 3. 5t 


单 击 右 侧 的 Account 荣 单 ， 进 入 登录 页 面 ， 输 入 刚才 注册 的 Apple 1D 即 可 进入 Apple Developer 控 制 台 ， 效 果 如 图 11.4 所 示 。 


é 


Developer 


Program Resources 
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x 


Overview 

Membership 

People 

Certificates, IDs & Profiles 
Tunes Connect 

CloudKit Dashboard 


Code-Level Support 


Additional Resources 


Ss o0 US 


Documentation 
Downloads 
Forums 

Bug Reporter 


News & Updates 


苹果 提供 了 以 下 两 种 开发 者 计划 。 


Account 


EE 
Colta. 


Apple Developer Program 


' 个 人 开发 者 计划 : 每 年 费用 是 $99， 应 用 可 以 发 布 至 App Store. 


< 


© 
Q 


People 


Send invitations to your development team so they can take 


advantage of membership resources. 


Certificates, Identifiers & Profiles 


Manage the certificates, identifiers, proñles, and devices you 


need to develop and distribute apps. 


iTunes Connect 


Publish and manage your apps on the App Store with 
iTunes Connect. 


图 11.4 Apple Developer 控 制 台 


“ 企业 开发 者 计划 : 每 年 费用 是 $299， 应 用 可 以 不 用 发 布 至 App Store. 


a 


此 时 ， 


如 果 是 企业 开发 者 计划 ， 用 户 下 载 并 安装 


打开 “设置 ”下 的 “ 通 


^ “描述 文件 与 设备 


管理 ”， 选 择 刚才 安装 的 应 


后 ， 打 开 应 用 会 弹出 请 求 授权 的 提示 框 ， 效 果 如 图 11.5 所 示 。 


击 信任 按钮 


后 才能 打 : 


， 效 果 如 


11.6 所 示 。 


不 受信 任 的 开发 者 


您 的 设备 管理 设置 不 允许 在 这 台 iPhone 
上 使 用 开发 者 "iPhone Developer: 
yuanlin@qiyoukeji.com 
(KZ8SD4S4X7)" 的 应 用 。 您 可 以 在 “ 设 
B 中 允许 使 用 这 些 应 用 。 


Hy 3 
BAVA 


图 11.5 企业 开发 者 计划 请 求 授权 提示 框 
coos HORA > 14:51 D7 wx» 98% $ 


< 返 [ yuanlin@qiyoukeji.com 


来 自 开 发 者 "iPhone Developer: yuanlin@qiyoukeji.com 
(KZ8SD4S4X7) "的 应 用 在 此 iPhone 未 受信 任 ， 在 信任 此 开 
发 者 之 前 将 不 会 运行 。 


(&1£ “yuanlin@qiyoukeji.com” 


来 自 开 发 者 "IPHONE DEVELOPER: 
YUANLINGQIYOUKEJI.COM (KZ8SD4S4X7)" 的 应 用 


(em 


=i) ch09 已 验证 


图 11.6 ”信任 企业 开发 者 


这 两 种 开发 者 计划 的 订购 地 址 分 别 如 下 。 
“ 个 人 开发 者 计划 : https://developer.apple.com/programs/enroll/ 。 
- 企业 开发 者 计划 : https://developer.apple.com/programs/enterprise/enroll/ o 


在 上 述 订购 页 面 中 ， 单 击 Start Your Enrollment 按 钮 ， 然 后 填写 相关 信息 并 缴纳 费用 后 ， 就 成 功 加 入 了 苹果 的 开发 者 计划 。 


11.1.2 ”生成 发 布 证 书 


打包 iOS 应 用 ， 需 要 准备 发 布 证 书 、App ID 以 及 描述 文件 ， 接 下 来 先 介绍 发 布 证 书 。 


(1) 打开 Apple Developer 控 制 台 ， 进 入 Certidicates，Indentifiers&Profiles， 单 击 右 侧 的 加 号 按钮 新 建 发 布 证 书 ， 效 果 如 图 11.7 所 示 。 


Certificates, Identifiers & Profiles = 


iOS, tvOS, watchOS X iOS Certificates D 


图 11.7 新 建 发 布 证 书 


(2) 在 证 书 类 型 页 面 选择 App Store and Ad Hoc 选 项 ， 效 果 如 图 11.8 所 示 。 


Production 


© App Store and Ad Hoc 
Sign your iOS app for submission to the App Store or for Ad Hoc distribution. 


图 11.8 ”选择 证 书 类 型 为 App Store and Ad Hoc 


(3) 单 击 Continue 按 钮 ， 进 入 生成 证 书页 面 ， 效 果 如 图 11.9 所 示 。 


a 


Certificate 


Generate 


Add iOS "Certificate" 


Download 


Generate your certificate. 


When your CSR file is created, a public and private key pair is automatically generated. Your 
private key is stored on your computer. On a Mac, it is stored in the login Keychain by default 
and can be viewed in the Keychain Access app under the "Keys" category. Your requested 


certificate is the public half of your key pair. 


Upload CSR file. 


Select .certSigningRequest file saved on your Mac. 


Choose File... 


图 11.9 准备 生成 证 书 


(4) 按照 页 面 的 介绍 ， 接 下 来 需要 在 苹果 电脑 上 通过 钥匙 串 来 生成 一 个 证 书签 名 文件 。 


打开 macOs 系 统 中 的 “钥匙 串 访问 ”应 


关于 钥匙 串 访问 
偏好 设置 ..… 36, 


证 书 助理 
票据 显示 程序 LEK 


服务 > 


隐藏 钥匙 串 访问 
隐藏 其 他 


gs H 
X. 26H 


退出 钥匙 串 访 问  36Q 


， 然 后 ， 选 择 菜单 “钥匙 串 访问 ”一 “证 书 助理 ”一 “从 证 书 颁发 机 构 请 求证 书 …” ， 效 果 如 


钥匙 串 访问 ”文件 ”编辑 


显示 窗口 帮助 


打开 .… 
创建 证 书 .… 


创建 证 书 颁 发 机 构 .. 
作为 证 书 颁发 机 构 为 其 他 人 创建 证 书 .… 
从 证 书 颁发 机 构 请 求证 书 .… 

设 定 默 认证 书 颁 发 机 构 .… 
评估 证 书 .… 


图 11.10 ”使 用 “钥匙 串 访问 ”应 用 生成 证 书签 名 文件 


(5) 填写 “ 


户 电子 邮件 地 址 ”等 信息 ， 选 择 “ 存 储 到 磁盘 ”选项 ， 


司 11.10 所 示 。 


击 “ 继 续 ” 按钮 ， 生 成 一 个 默认 名 为 CertificateSigningRequest.certSigningRequest 的 文件 并 保存 至 桌面 ， 效 果 如 


图 


11.11 所 


正 书 助理 


存储 为 :  CertificateSigningRequest.certSigningRe ~ 


Desktop 


_) 用 电子 邮件 发 送 给 CA 
。) 存储 到 磁盘 
(| 让 我 指定 密 钥 对 信息 


继续 


图 11.11 生成 证 书签 名 文件 


(6) 在 Apple Developer 控 制 台 的 Generate your certificate 页面 选择 磁盘 上 的 CertificateSigningRequest.certSigningRequest 文 件 ， 单 击 Continue 按 钮 ， 就 完成 了 发 布 证 书 的 创建 ， 效 果 如 
11.12 所 示 。 


Add iOS "Certificate" 


Select Type Request Generate Download 


Your certificate is ready. 


Download, Install and Backup 
Download your certificate to your Mac, then double click the .cer file to install in Keychain 
Access. Make sure to save a backup copy of your private and public keys somewhere secure. 


Name: iOS Distribution: Nanjing Jichuangtang Technology Co., Ltd. 
Type: iOS Distribution 
Expires: Feb 15, 2018 


图 11.12 ”生成 发 布 证 书 


(7) 成 功 生成 发 布 证 书后 ， 单 击 Download 按 钮 下 载 该 证 书 。 最 后 双击 下 载 的 证 书 文件 ， 完 成 证 书 的 安装 。 


11.1.3 ”注册 App ID 


打开 Apple Developer 控 制 台 ， 进 入 Certidicates，Indentifiers&Profiles， 选 择 左 侧 Indentifiers 一 栏 中 的 App 1Ds， 单 击 右 侧 的 加 号 按钮 ， 效 果 如 图 11.13 所 示 。 


ID Registering an App ID 


The App ID string contains two parts separated by a period (.) — an App ID Prefix that is 
defined as your Team ID by default and an App ID Suffix that is defined as a Bundle ID search 
string. Each part of an App ID has different and important uses for your app. Learn More 
图 11.13 ”注册 App ID 
然后 按照 网 站 的 说 明和 要 求 ， 填 写 App ID 相关 信息 。 
* App ID Description: 应 用 描述 。 
- App ID Suffix: 应 用 唯一 标识 ， 需 要 与 Xcode 工程 General 中 的 Bundle Identifier 保 持 一 致 。 当 然 ， 还 可 以 使 用 Wildcard App ID 的 通配符 “*” 来 匹配 多 个 Bundle Identifier. 


最 后 单 击 Continue 按 钮 ， 完 成 App ID 的 注册 。 


11.1.4 ”生成 描述 文件 


打开 Apple Developer 控 制 台 ， 进 入 Certidicates，Indentifiers&Profiles， 选 择 左 侧 Provisioning Profiles 一 栏 中 的 Distribution， 单 击 右 侧 的 加 号 按钮 新 建 描述 文件 。 


然后 在 描述 文件 类 型 页 面 选择 App Store， 效 果 如 图 11.14 所 示 。 


Distribution 


© App Store 
Create a distribution provisioning profile to submit your app to the App Store. 


11.14 选择 描述 文件 类 型 为 App Store 


接着 选择 刚才 注册 的 App ID 和 新 建 的 发 布 证 书 ， 单 击 Continue 按 钮 ， 输 入 Profile Name， 即 可 生成 描述 文件 ， 效 果 如 图 11.15 所 示 。 


成 功 生成 描述 文件 后 ， 单 击 Download 按 钮 下 载 该 文件 。 最 后 双击 下 载 的 描述 文件 ， 完 成 安装 。 


dU Your provisioning profile is ready. 


PROV 


Download and Install 
Download and double click the following file to install your Provisioning Profile. 


Name: Profile 
Type: iOS Distribution 
App ID: PZMZRD3BC7.* 


Expires: Feb 15, 2018 


E145 生成 描述 文件 


11.15 “打包 应 用 
准备 好 发 布 证 书 、App ID 以 及 描述 文件 之 后 ， 就 可 以 开始 打包 应 用 了 。 
(ao 本 章 打 包 用 到 的 React Native 应 用 使 用 react-native init ch09 命 令 生 成 ， 关 于 更 多 React Native 命 令 行 工 具 的 使 用 ， 读 者 可 以 参考 本 书 第 3 章 的 内 容 。 
(1) 将 Xcode 工 程 General 中 Provisioning Profile 设 置 成 11.1.2 节 中 生成 的 描述 文件 。 


(2) 打开 Xcode 菜单 Product， 选 择 Archive 开 始 打 包 。 


Cus. 如 果菜 单 Archive 是 灰色 的 话 ， 请 检查 当前 Xcode 使 用 的 是 否 为 iPhone 真 机 。 


(3) 打包 成 功 后 ,会 自动 打开 菜单 Window 一 Organizer 的 页 面 ,效果 如 图 11.16 所 示 。 


Name Creation Date v Version Archive Information 


(5 choo 2017 年 2 月 16 日 16:39 — 10(1) 
[A ch09 
2017 年 2 月 16 日 16:39 


Upload to App Store... 


Validate... Export... 


图 11.16 ”打包 成 功 后 自动 打开 Organizer 页 面 


11.1.6 发 布 到 App Store 


完成 应 用 打包 工作 之 后 ， 最 后 一 步 就 是 将 应 用 发 布 到 iTunes Connect 了 。 
问题 : 什么 是 iTunes Connect? 


回答 : iTunes Connect 是 一 套 基 于 Web 的 工具 ， 可 便于 开发 者 提交 和 管理 App， 以 供 在 App Store 或 Mac App Store 中 销售 。 更 多 详细 介绍 ， 可 以 参 
考 https://developet.apple.com/library/content/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide_SCh/Chapters/ About.html。 


(1) 打开 iTunes Connect (https://itunesconnect.apple.com/) ， 选 择 “ 我 的 App”， 单 击 左 侧 的 加 号 按钮 ， 效 果 如 图 11.17 所 示 。 


ooo 


11.17 iTunes Connect 新 建 应 用 


(2) 选择 “新 建 App” 选 项 ， 弹 出 填写 App 信 息 提示 框 ， 效 果 如 图 11.18 所 示 。 


(3) 按照 网 站 的 说 明和 要 求 填写 相关 信息 ， 完 成 在 Tunes Connect 新 建 应 用 的 工作 。 


在 iTunes Connect 中 新 建 应 用 后 ， 重 新 返回 到 Xcode 工程 的 Organizer 页 面 ， 效 果 如 图 11.19 所 示 。 


新 建 App 
平台 ? 
iOS |. Apple TVOS 


名 称 ? 


选择 v 


请 前 往 开发 人 员 门 户 网 站 (Developer Portal) 注册 一 个 新 的 套装 ID。 


图 11.18 填写 发 布 应 用 的 相关 信息 


ch09 


2017 年 2 月 16 日 16:39 


Upload to App Store... 


Validate... 


Details 


Version 1.0 (1) 


Export... 


Identifier org.reactjs.native.example.... 
Type iOS App Archive 


Download dSYMs... 


图 11.19 ”显示 打包 结果 的 Organizer 页 面 


(4) 单 击 Upload to App Store 按 钮 ， 选 择 相 应 证 书后 ， 再 单 击 Upload 按 钮 ， 即 可 发 布 应 用 到 iTunes Connect 中 。 


Asz: 由 于 网 络 原 因 ， 可 能 上 传 应 用 的 时 间 较 长 ， 请 耐心 等 待 或 提高 网 络 带 宽 。 


11.2 Android 应 用 商店 


由 于 网 络 原因 导致 Google 相 关 服 务 在 国内 无 法 访问 ， 因 此 ， 如 果 只 是 在 国内 销售 的 Android 应 


11.2.1 生成 签名 文件 


， 通 常 不 需要 上 传 到 Google Play 商店 ， 下 面 介绍 的 内 容 也 以 国内 应 上 


Android 要 求 所 有 应 用 都 有 一 个 数字 签名 才 会 被 允许 安装 在 用 户 手 机 上 ， 因 此 在 把 应 用 发 布 到 应 用 


商店 之 前 ， 需 要 对 生成 的 APK 包 进行 签名 。 


Lia ; 关于 Android 签 名 和 发 布 的 详细 介绍 ， 读 者 可 以 参考 Android 官 方 文档 https://developer.android.com/studio/publish/app-signing.html。 


商店 为 主 。 


(1) 打开 Android Studio 的 菜单 Build 一 Generate Signed APK.…， 效 果 如 图 11.20 所 示 。 


Module: [Ci app 


Help Cancel 
图 11.20 ”生成 签名 AP 区 包 : 配置 模 


(2) 单 击 Next 按 钮 ， 进 入 下 一 页 面 ， 效 果 如 图 11.21 所 示 。 


Key store path 


Create new.. Choose existing... 


Key store password 


Key alias 
Key password 


Remember passwords 


Help Cancel Previous 


E121 生成 签名 APK 包 : 配置 签名 文件 


(3) 单 击 Create new... 按 钮 ， 进 入 新 建 签名 文件 的 页 面 ， 效 果 如 图 11.22 所 示 。 


Key store path /Users/yuanlin/ Desktop/ch09- keystore.jks 
Password HIITIITTE Confirm: | eeeeeece 
Key 

Alias ch09-keystore 


Password EL Confirm ae mae ee 


(9 
v 


Validity (years): 25 


Certificate 


First and Last Name: | Xiao Ming 


Organizational Unit org.learnreactnative 


Organization org.learnreactnative 
City or Locality Nan Jing 
State or Province Jiang Su 


Country Code (XX) 86 


Cancel 


E11.22 ”生成 签名 AP 区 包 : 新 建 签 名 文件 


(4) 根据 页 面 的 说 明和 要 求 ， 填 写 以 下 相关 信息 。 


- Key store path: 密 钥 库存 放 的 路 径 。 
Password: 密 钥 库 密码 。 

+ Key Alias: 签名 文件 别名 。 

* Key Password: 签名 文件 密码 。 

+ Key Validity: 签名 文件 有 效 期 ， 单 位 为 年 。 


. 名 字 、 组 织 、 城 市、 省 份 、 国 家 码 等 信息 。 


(5) 单 击 OK 按钮 ， 生 成 打包 APK 时 要 使 用 的 签名 文件 。 


A 意 : 打包 APK 时 会 用 到 上 述 设置 的 别名 、 密 码 等 信息 ， 所 以 请 读者 牢记 。 


和 Android 原 生 应 用 打包 的 过 程 相 比 ，React Native 应 用 打包 前 需要 先 打 包 JavaScript 资 源 。 


进入 React Native 项 目 所 在 的 目录 : 


cd ch09 


新 建 assets 文 件 夹 ， 用 于 存放 JavaScript 打 包 后 的 资源 。 


mkdir -p android/app/src/main/assets 


使 用 React Native 命 令 行 工 具 打 包 JavaScript 相 关 资 源 。 


react-native bundle --platform android --dev false --entry-file index. 
android.js --bundle-output android/app/src/main/assets/index.android. 
bundle --assets-dest android/app/src/main/res/ 


打包 成 功 后 ，ch09 工 程 的 效果 如 图 11.23 所 示 。 


Android 


C app 
C] manifests 


MJ java 


[= assets 
index.android.Dundie 
D index.android.bundle.meta 
> [zres 
(ss Gradle Scripts 


图 11.23 ”打包 JavaSctipt 资 源 


准备 好 签名 文件 以 及 JavaScript 资 源 包 之 后 ， 就 可 以 开始 打包 应 用 了 。 


首先 打开 Android Studio 的 菜单 Build 一 Generate Signed APK...， 单 击 Next 按 钮 ， 进 入 配置 签名 文件 页 面 ， 效 果 如 图 11.24 所 示 。 


Key store path /Users/yuanlin/Desktop/ch09-keystore.jks 


Create new... Choose existing.. 
Key store password eeccecce 
Key alias ch09- keystore 


Key password IIIIITIT. 


Remember passwords 


Help Cancel Previous 


图 11.24 生成 签名 APK 包 : 配置 签名 文件 


选择 刚才 生成 的 签名 文件 ， 并 填写 别名 、 密 码 等 信息 。 然 后 单 击 Next 按 钮 ， 进 入 配置 编译 选项 页 面 ， 效 果 如 图 11.25 所 示 ， 配 置 生成 APK 包 存放 的 路 径 以 及 编译 类 型 为 release。 此 时 单 击 Finish 按 
钮 ，Android Studio 就 会 在 指定 目录 生成 APK 包 。 


Note: Proguard settings are specified using the Project Structure Dialog 
APK Destination Folder ruanlin/ Desktop/learnreactnative/code/ch09/android/app 
Build Type release 


Flavors 


Signature Versions 


Help Cancel Previous 


图 11.25” 生 成 签名 APK 包 : 配置 编译 选项 


11.2.3 ”发 布 到 应 用 商店 


完成 应 用 打包 工作 之 后 ， 最 后 一 步 就 是 将 应 用 发 布 到 应 用 商店 。 众 所 周知 ， 除 了 官方 的 Google Play 商 店 ， 国 内 的 Android 应 用 商店 也 有 很 多 : 
: 腾讯 应 用 宝 (http://sj.qq.com/) o 

“ 百度 手机 助手 (http://shouji.baidu.com/) o 

+ 360 手机 助手 (http://sj.360.cn/) o 


+ 华为 应 用 市 场 (http://app.hicloud.com/) 。 


- OPPOKF B/E (http://store.oppomobile.com/) o 
“小米 商 店 (http://app.mi.com/) o 

“ 安 卓 市 场 (http://apk.hiapk.com/) o 

“ 安 智 市 场 (http://www.anzhi.com/) o 


+ 豌豆 英 (https://www.wandoujia.com/) o 


以 及 很 多 还 没有 列 出 的 其 他 应 用 商店 。 
通常 的 办 法 就 是 去 每 个 应 用 商店 注册 应 用 信息 ， 然 后 将 我 们 的 应 用 发 布 到 每 一 个 应 用 商店 。 这 个 办 法 虽然 可 行 但 是 并 不 推荐 ， 因 为 效率 实在 太 低 。 
这 里 笔者 推荐 一 个 一 站 式 发 布 的 平台 酷 传 (http://www.kuchuan.com/) ， 其 功能 如 图 11.26 所 示 。 
全 面 覆盖 快速 便捷 高 效 省 时 双重 方式 
所 有 安 卓 主 流 渠 道 优化 流程 ， 操 作 更 简单 一 键 发 布 ， 节 约 上 线 时 间 支持 多 渠道 包 上 传 
11.26 Bete 
酷 传 最 大 的 作用 是 支持 一 键 发 布 30 多 个 应 用 市 场 ， 从 而 大 大 节省 了 Android 应 用 发 布 的 时 间 和 精力 。 关 于 酷 传 的 详细 使 用 ， 读 者 可 以 自行 注册 酷 传 账号 ， 按 照 页 面 说 明和 要 求 完成 操作 即 可 。 


Baz: 解决 发 布 Android 应 用 到 多 应 用 商店 的 问题 ， 本 书 推荐 但 不 局 限于 酷 


113 ae 


本 章 介 绍 了 一 个 App 完 成 后 要 做 的 工作 ，App 如 果 发 布 ， 并 不 像 普通 软件 一 样 ， 给 个 exe 文 件 就 能 运行 ， 要 让 别人 能 看 到 我 们 的 应 


， 就 必须 遵守 苹果 或 Android 的 规定 ， 比 如 11.1 节 的 内 容 ， 就 是 帮助 


我 们 完成 App 在 苹果 商店 的 上 架 ，11.2 节 的 内 容 就 是 帮助 我 们 完成 App 在 Android 一 些 商 店 的 上 架 ， 尤 其 是 最 后 ， 笔 者 还 推荐 了 一 款 可 


第 12 章 App 的 热 部 署 


第 11 章 详细 介绍 了 iOS 应 用 以 及 Android 应 用 打包 和 发 布 的 全 过 程 。 其 中 有 一 个 问题 容易 被 忽略 : 应 用 发 布 到 应 用 商店 是 需要 
比较 长 ， 大 概 需要 1 ~ 2 周 。 但 是 移动 应 用 产品 更 新 的 速度 却 非常 快 ， 通 常 1 ~ 2 周 或 者 几 天 时 间 就 可 完成 一 次 版 本 迭代 。 


热 部 署 就 是 为 了 解决 这 一 问题 而 生 的 ， 不 用 提交 新 的 审核 ， 通 过 服务 器 动态 更 新 React Native 的 JavaScript 代 码 来 实现 应 


121 什么 是 热 部 署 


在 详细 解释 热 部 署 之 前 ， 我 们 可 以 想 一 想 平时 使 
们 浏览 的 新 闻 网 站 虽然 没有 下 载 和 更 新 过 任何 软件 ， 但 是 每 天 访问 时 的 内 容 都 有 可 能 不 同 ， 
会 随 之 更 新 。 


E 
里 


核 的 。 通 常 ，Android 应 


界 决 应 用 同时 上 架 多 个 商店 的 软件 。 


商店 审核 大 概 需 要 几 天 ，iOS 应 用 商店 


核 却 


的 更 新 。 


到 的 例子 。 通 常 的 计算 机 上 都 会 安装 Office 办 公 软 件 ， 如 果 Office 有 新 功能 新 版 本 推出 ， 则 需要 下 载 更 新 的 安装 包 到 计算 机 上 ， 然 后 安装 后 使 用 。 人 
因为 网 站 的 内 容 都 是 通过 浏览 器 实时 从 服务 器 获取 的 ， 网 站 服务 器 的 内 容 一 更 新 ， 人 们 打开 的 网 站 页 面 的 内 容 也 


Baz: 热 部 署 与 上 述 浏览 器 打开 网 站 的 例子 并 不 完全 相同 ， 但 是 通过 这 个 生活 中 的 例子 ， 可 以 方便 读者 理解 热 部 署 的 原理 和 作用 。 


的 功能 。 热 部 署 的 原理 如 图 


， 通 过 服务 器 的 动态 更 新 来 更 新 应 


新 审核 和 安装 新 版 本 的 应 


对 于 应 


来 说 ， 热 部 署 是 指 不 需 


12.1 所 示 。 


图 12.1 热 部 署 的 原理 


12.2 解析 React Native 应 用 的 工作 原理 


React Native 的 优势 在 本 书 第 1 章 中 就 已 经 有 了 详细 的 介绍 。 除 了 之 前 介绍 的 跨 平台 开发 优势 之 外 ，React Native 的 另 一 项 革命 


(1) 使 


加 载 React Native 组 件 的 过 程 。 


React Native 命 令 行 工具 来 初始 化 一 个 新 的 项 目 : 


性 的 创新 就 在 于 为 移动 应 


的 动态 更 新 提供 了 基础 。 这 里 回顾 一 下 iOS 应 


react-native init ch010 


(2) 等 待 工程 创建 成 功 并 安装 好 所 有 依赖 后 ， 使 


Xcode 打开 ios/ch12.xcodeproj 文 件 ， 修 改 AppDelegate 代 码 如 下 : 


01 #import "AppDelegate.h" 


02 
03 
04 
05 
06 
07 
08 


09 
10 
11 


12 
13 


#import <React/RCTBundleURLProvider.h> 
#import <React/RCTRootView.h> 


Gimplementation AppDelegate 


- (BOOL)application: (UIApplication *)application didFinishLaunching 
WithOptions: (NSDictionary *)launchOptions { 


Gend 


NSURL *jsCodeLocation; 


jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index. 
ios.bundle?platform-ios&dev-true"]; 


RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: 
jsCodeLocation 
moduleName:@"ch10" 
initialProperties:nil 
launchOptions:launchOptions]; 
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green: 
1.0f blue:1.0f alpha:1]; 


self.window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen]. 
bounds]; 
UIViewController *rootViewController = [UIViewController new]; 


rootViewController.view = rootView; 
self.window.rootViewController - rootViewController; 
[self.window makeKeyAndVisible]; 

return YES; 


此 时 jsCodeLocation 加 载 的 地 址 是 http://localhost: 8081/index.ios.bundle， 那 么 这 个 地 址 是 从 何 而 来 呢 ? 


原来 ， 当 执行 react-native run-ios 或 者 react-native run-android 命 令 时 : 
: 首先 ， 将 JavaSctipt 相 关 资 源 打 包 ， 例 如 ，iOS 应 用 的 JavaSctipt 资 源 打包 为 index.ios.bundle。 


| 然后 ， 启 动 一 个 基于 Node.js 的 React Native 服 务 ， 这 个 服务 运行 在 本 地 ， 监 听 的 默认 端口 号 是 8081， 最 后 当 应 用 请 求 该 地 址 的 index.ios.bundle 资 源 时 ， 就 会 从 React Native 服 务实 时 获取 最 新 的 JavaSctipt 资 


“ 最 后 ， 当 应 用 请 求 该 地 址 的 index.ios.bundle 资 源 时 ， 就 会 从 React Native 服 务实 时 获取 最 新 的 JavaScript 资 源 。 


“另外 ， 当 修改 index.ios.js 文 件 时 ，React Native 会 重新 打包 JavaScript 资 源 ， 这 样 就 实现 了 应 用 的 热 更 新 。 


正 是 React Native 的 这 种 设计 ， 让 React Native 平 台 很 容易 就 可 实现 其 他 原生 开发 平台 无 法 实时 更 新 的 优势 。 


人 
都 不 是 官方 的 解决 方案 ， 而 且 苹果 公司 已 对 此 发 出 了 警告 。 因 此 相 比 React Native 这 种 天 生 支持 热 更 新 的 设计 来 说 ， 它 们 的 普及 度 和 稳定 性 都 有 一 定 差距 。 


12.3 ”实现 React Native 的 热 部 署 


了 解 了 React Native 应 用 的 运行 原理 之 后 ， 就 可 以 实现 自己 的 热 部 署 系 统 了 。 


12.3.1 ”服务 端 实现 


服务 端 实现 的 步骤 如 下 。 


(1) 新 建 一 个 用 于 热 更 新 的 服务 器 项 目 ， 命 令 如 下 : 


express --ejs HotUpdate // 新 建 HotUpdate 项 目 ， 并 使 用 ejs 模板 引擎 


Ca: 关于 express 命 令 的 详细 介绍 ， 读 者 可 以 参考 本 书 6.3 节 。 


(2) 将 React Native 应 用 用 到 的 JavaScript 资 源 打包 : 


react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ios/ index.ios.bundle 


(3) 将 打包 好 的 JavaScript 资 源 包 放 至 HotUpdate 的 public 目 录 下 ， 效 果 如 图 12.2 所 示 。 


* | 3 HotUpdate 


> [53 node modules 
x4 package.json 
v [3 public 
» L3images 
. » index.ios.bundle 
> [3 javascripts 
> [H stylesheets 
routes 
> D3views 


图 12.2 ”将 JavaScript 资 源 包 放 至 服务 器 


(4) 运行 HotUpdate 服 务 ， 命 令 如 下 : 


cd HotUpdate 
npm start 


(5) 此 时 ， 使 用 浏览 器 打开 地 址 http://localhost:3000/index.ios.bundle， 下 载 index.ios.bundle 文 件 ， 表 示 服 务 器 程序 已 经 部 署 成 功 。 


12.3.2 ”客户 端 实现 


服务 器 部 署 成 功 后 ， 客 户 端的 实现 就 变 得 简单 很 多 。 


(1) 使 用 Xcode 打开 ios/ch12.xcodeproj 文 件 ， 修 改 AppDelegate 代 码 如 下 : 


01 #import "AppDelegate.h" 


02 

03 #import «React/RCTBundleURLProvider.h» 

04 #import <React/RCTRootView.h> 

05 

06 @implementation AppDelegate 

07 

08 - (BOOL)application: (UIApplication *)application didFinishLaunching 
WithOptions: (NSDictionary *)launchOptions { 

09 NSURL *jsCodeLocation; 

10 

11 jsCodeLocation = [NSURL URLWithString:@"http://localhsot:3000/ 

index.ios.bundle?platform-ios&dev-false"]; 
12 
13 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: 


jsCodeLocation 
moduleName:@"ch10" 
initialProperties:nil 


launchOptions:launchOptions]; 
14 rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green: 
1.0f blue:1.0f alpha:1]; 


15 

16 self.window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen]. 
bounds]; 

17 UIViewController *rootViewController - [UIViewController new]; 

18 rootViewController.view = rootView; 

19 self.window.rootViewController = rootViewController; 

20 [self.window makeKeyAndVisible]; 

21 return YES; 

22 H 

23 

24 Gend 


(2) 此 时 jsCodeLocation 加 载 的 地 址 是 http://localhost:3000/index.ios.bundle， 这 个 地 址 就 是 12.3.1 节 搭建 的 HotUpdate 服 务 器 JavaScript 资 源 的 地 址 。 


(3) 重新 编译 和 运行 iOS 应 用 ， 可 以 看 到 应 用 成 功 加 载 React Native 组 件 的 效果 ， 如 图 12.3 所 示 。 


Carrier > 4:07 PM 


Welcome to React Native! 


To get started, edit index.ios.js 


Press Cmd+R to reload, 
Cmd+D or shake for dev menu 


图 12.3 ”加 载 HotUpdate 服 务 器 的 JavaScript 资 源 


(4) 为 了 验证 热 更 新 的 效果 ， 此 时 可 以 修改 index.ios,js 代 码 如 下 : 


o // 这 里 省 略 了 没有 修改 的 代码 


03 export default class ch10 extends Component { 

04 render() ( 

05 return ( 

06 «View style={styles.container}> 

07 <Text style={styles.welcome}> 

08 来 自 HotUpdate 服 务 器 的 Bundle 

09 </Text> 

10 <Text style={styles.instructions}> 
11 To get started, edit index.ios.js 
12 </Text> 

13 <Text style={styles.instructions}> 
14 Press Cmd+R to reload, {'\n'} 
15 Cmd+D or shake for dev menu 
16 </Text> 

17 </View> 

18 ); 

19 } 

20 } 

21 


22 // 这 里 省 略 了 没有 修改 的 代码 


(5) 重新 打包 React Native 应 用 的 JavaScript 资 源 : 


react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ios/index.ios.bundle 


(6) HÆRRA JavaScript EJ ss HotUpdate T EETEVRS CHE, BINA, ALA BReact Native 应 用 在 未 做 任何 修改 的 情况 下 ， 页 面 内 容 已 经 成 功 更 新 ， 效 果 如 图 12.4 所 示 。 


来 自 HotUpdate 服 务 器 的 Bundle 


To get started, edit index.ios.js 


Press Cmd+R to reload, 
Cmd+D or shake for dev menu 


图 12.4 React Native 应 用 热 更 新 


至 此 ， 一 个 简单 的 热 更 新 服务 就 实现 了 。 


124 ”微软 的 热 部 署 方案 CodePush 


我 们 自己 实现 的 热 更 新 服务 虽然 简单 有 效 ， 但 是 也 存在 一 些 问题 : 


“ 首次 使 用 有 一 定 延 时 ， 因 为 需要 下 载 JavaScript 包 。 


“ 网络 劫持 等 问题 。 


因此 ， 实 际 开 发 中 使 用 的 热 更 新 通常 基于 本 地 文件 ， 即 将 更 新 包 下 载 到 本 地 后 使 用 。 


基于 上 述 原理 ， 可 以 使 用 第 三 方 的 实现 方案 ， 即 微软 推出 的 CodePush。 


12.4.1 CodePush 简 介 


CodePush (https://microsoft.github.io/code-push/) 是 微软 提供 的 一 套用 于 热 更 新 React Native 和 Apache Cordova 应 用 的 服务 ， 提 供 React Native 和 Apache Cordova 开 发 者 直接 部 署 移动 应 
新 给 用 户 的 云 服务 。CodePush 作 为 一 个 中 央 仓 库 ， 开 发 者 可 以 推送 更 新 ， 然 后 应 用 从 客户 端 查询 更 新 。 这 样 不 需要 重新 审核 和 安装 应 用 ， 就 可 以 解决 缺陷 和 添加 新 的 特性 。 


CodePush 主 要 的 功能 和 优势 有 : 

- 开源 免费 ，CodePush 源 码 托管 在 GitHub (https://github.com/microsoft/code-push) 。 
“ 直接 对 用 户 部 署 代码 更 新 。 

. 管理 Alpha、Beta 以 及 生产 环境 应 用 。 

+ 支持 JavaScript 文 件 和 图 片 资 源 的 更 新 。 


+ 支持 React Native 和 Apache Cordova 应 用 。 


12.4.2 ”CodePush 安 装 和 注册 


使 用 CodePush 之 前 首先 要 安装 CodePush 命 令 行 工 具 ， 然 后 新 建 CodePush 账 号 和 应 用 。 


1. 安装 CodePush 命 令 行 工 


使 用 CodePush 都 是 通过 CodePush 官 方 提供 的 命令 行 工 具 ， 安 装 命令 如 下 : 


npm install -g code-push-cli 


安装 成 功 后 可 以 通过 如 图 12.5 所 示 的 方法 进行 验证 。 


+ ~ code-push -v 
1.12.6-beta 


" 


2. 新 建 CodePush 账 号 


图 12.5 查看 是 否 安装 成 功 并 显示 版 本 号 


在 终端 输入 命令 code-push register， 将 会 打开 注册 页 面 让 开发 者 选择 授权 账号 ， 效 果 如 图 12.6 所 示 。 


Please select an authentication provider for your CodePush account: 


O GitHub 一 Microsoft (Personal) 


图 12.6 ”新 建 CodePush 账 号 


D 


选择 相应 的 账号 登录 并 授权 ， 会 得 到 一 个 CodePush "access key”， 复 制 此 access key 到 终端 即 可 完成 注册 ， 效 果 如 图 12.7 所 示 。 


iOS, 


A browser is being launched to authenticate your account. Follow the instructions it displays to complete 
your login. 


AkHFO-6fxAs8IzsZAtBVBV-OF twm4krrevS6b 


—— S logged-in. Your session file was written to /U je- . You can run the 
command at any time to delete this file and terminate your session. 


图 12.7 登录 CodePush 账 号 


于 账号 和 登录 管理 的 命令 还 有 以 下 几 项 。 


+ code-pushlogin: 登录 。 
* code-push logout: 注销 。 
* code-push access-key Is: 列 出 access-key。 


* code-push access-key rm<accessKey>: 删除 某 个 access-key。 


为 了 让 CodePush 服 务 器 知道 我 们 的 应 用 ， 还 需要 在 服务 器 上 进行 注册 ， 在 终端 输入 命令 code-push app add<appName> 即 可 完成 注册 ， 效 果 如 图 12.8 所 示 。 
a d 如 果 React Native 应 用 同时 发 布 Android 和 iOS 版 本 ， 那 么 在 注册 CodePush 应 用 的 时 候 需 要 注册 两 个 应 用 ， 获 取 两 套 deployment key， 例 如 code-push app add App-Android4ecode-push app add App- 


* ~ Code-push app add CodePush-i0S 
Successfully added the "CodePush-iOS" app, along with the following default deployments: 


Production | WCXLKgBm0VP22joEC)QVowPFi J jD4krrevS6b 
Staging ORenElCPnSl4UTFgguUH4Azlps6Qm4krrevS6b 


+ ~ code-push app add CodePush-Android 
Successfully added the "CodePush-Android" app, along with the following default deployments: 


Production | gzl6pfadUMLdMd-YY jcRmIXg8uEW4krrevS6b 


Staging ku0J5ndA3s. D7hHuWOWeG60FV5J L4krrevS6b 


图 12.8 新建 CodePush 应 用 


成 功 新 建 CodePush 应 用 后 ， 每 个 应 用 都 会 得 到 两 个 deployment key。 


: Production: 用 于 生产 环境 的 deployment key. 


+ Staging: 用 于 模拟 环境 的 deployment key. 


A 是 : 上 述 应 用 的 deployment key 在 后 面 的 配置 中 需要 用 到 。 当 然 ， 还 可 以 使 用 命令 code-push deployment lscappName?-k #74 . 


于 应 用 管理 的 命令 还 有 以 下 几 项 。 


* code-push app add: 在 登录 账号 中 添加 一 个 新 的 App。 
* code-push app remove: 在 登录 账号 中 删除 一 个 App。 
* code-push app rename: 重 命名 一 个 存在 的 App。 


* code-push app list: 列 出 登录 账号 下 面 所 有 的 App。 


* code-push app transfer: 把 App 的 所 有 权 转 移 到 另外 一 个 账号 。 


完成 了 上 述 CodePush 账 号 和 应 用 操作 之 后 ， 下 一 步 就 可 以 将 CodePush SDK 集 成 到 React Native 的 应 用 中 ， 实 现 热 更 新 了 。 


(1) 使 用 React Native 命 令 行 工具 来 初始 化 一 个 新 的 项 目 。 


react-native init CodePush 


(2) 将 react-native-code-push 添 加 到 新 建 的 CodePush 项 目 中 ， 命 令 如 下 : 


cd CodePush 
npm install --save react-native-code-push@latest 


(3) 将 react-native-code-push 的 依赖 添加 到 原生 工程 中 ， 


react-native link react-native-code-push 


命令 如 下 : 


(4) 此 时 会 提示 分 别 输入 iOS 和 Android 应 用 的 deployment key: 


? What is your CodePush deployment key for iOS (hit «ENTER» to ignore) 


? What is your CodePush deployment key for Android (hit «ENTER» to ignore) 


如 果 忘 记 的 话 ， 可 以 通过 如 下 命令 查看 CodePush 应 用 的 deployment key， 效 果 如 图 12.9 所 示 。 


+ ~ Code-push deployment ls CodePush-i0S -k 


Production | WCXLKgBmOVP22 joEC)QVowPFi J jD4krrevS6b 


Staging ORenElCPnSl4UTFgguUH4zlps6Qm4krrevS6b 


+ ~ code-push deployment ls CodePush-Android -k 


Production | gzl6pfadUMLdMd-YY jcRmIXg8uEW4krrevS6b 


Staging ku0J5ndA3s. D7hHuWOWeG60FV5J14krrevS6b 


图 12.9 查看 CodePush 应 用 的 deployment key 


成 功 添加 react-native-code-push 到 CodePush 项 目 后 ， 还 需要 对 原生 工程 做 一 些 修改 ，12.4.4 节 将 接着 介绍 。 


12.44 ”更 改 iOS 应 用 


先 ， 使 用 Xcode 打开 ios/CodePush.xcodeproj 文 件 。 打 


01 #ifdef DEBUG 

02 jsCodeLocation = [[RCTBundleURLProvider sharedSettings] 
URLForBundleRoot:@"index.ios" fallbackResource:nil]; 

03 #else 

04 jsCodeLocation = [CodePush bundleURL]; 

05 #endif 


AppDelegate 文 件 ， 可 以 看 到 此 时 jsCodeLocation 相 关 代 码 如 下 : 


jsBundle 


Xcode 的 菜 


此 时 在 非 Debug 情 况 下 ， 加 载 的 jsCodeLocation 是 [CodePush bundleURL]。 于 是 为 了 加 载 CodePush 的 Bundle 地 址 ， 修 改编 译 选项 为 Release， 打 


到 12.10 所 示 。 


CodePush 一 EditScheme， 效 果 如 


A CodePush (CodePush project) ) Ml iPhone 7 


> = Info Arguments Options Diagnostics 
3 targets 
Run 
> BE Release Build Configuration Release 
p PM Executable | A CodePush.app c 
Debug 
Profile v! Debug executable 
PU kalame 
Pow Debug Process As * 
Analyze 
» 8 Debug 
Archive Launch (+) Automatically 
> 
Release Wait for executable to be launched 
Duplicate Scheme Manage Schemes... v Shared Close 


图 12.10 ”修改 编译 选项 


完成 了 原生 项 目的 配置 之 后 ， 再 修改 React Native 相 关 的 逻辑 ， 修 改 index.iosjs 代 码 如 下 : 


01 import React, 
02 
03 
04 
05 
06 
07 
08 
09 
10 } 
11 } 

12 
13 
14 
15 
16 
17 
18 
19 } 
20 D; 

21 } 

22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 ) 7 
34 

35 } 

36 
37 
38 
39 
40 
41 
42 
43 h 

44 welcome: ( 

45 fontSize: 30, 
46 textAlign: 
47 margin: 10 
48 hy 

49 instructions: { 
50 fontSize: 30, 
51 textAlign: 
52 color: '#333333', 
53 marginBottom: 5 
54 } 

55 D; 

56 
57 


(Component) from 'react'; 


constructor(props) ( 
super (props) ; 
this.state = { 


message: ' 


componentDidMount() { 


) else ( 


render() ( 
return ( 


«/Niew» 


const styles = StyleSheet.create(( 
container: ( 
flex: 1, 
justifyContent: 
alignItems: 
backgroundColor: 


this.setState ({message: 


'center', 


'center', 


AppRegistry.registerComponent ('CodePush', 


import (AppRegistry, StyleSheet, Text, View) from 'react-native'; 
import codePush from 'react-native-code-push'; 


export default class CodePush extends Component ( 


codePush.checkForUpdate().then((update) => ( 
if (!update) { 
this.setState ({message: 


' 已 经 是 最 新 版 
' 有 更 新 '}); 


<View style={styles.container}> 
<Text style={styles.welcome}> 


本 号 1.0 


</Text> 
<Text style={styles.instructions}> 


{this.state.message} 


</Text> 


‘center', 
‘center', 
'#F5FCFF' 


() => codePush (CodePush) ) ; 


“ 


上 述 代码 将 在 componentDidMount 中 检查 当前 CodePush 应 用 是 否 有 更 新 ， 并 且 使 有 


的 更 新 。 


limi 


新 编译 和 运行 应 用 ， 效 果 如 图 12.11 所 示 。 


有 codePush () 方法 返回 一 个 封装 后 的 组 件 codePush (CodePush) ， 该 组 件 可 以 自动 检测 并 下 载 CodePush 应 


Carrier > 


1:17 PM 


hid 1.0 
已 经 是 最 新 版 本 


— 


然后 将 显示 的 系统 版 本 号 升级 为 1.1， 修 改 index.ios.js 代 码 如 下 : 


12.11 版 本 1.0 的 OS 应 用 


// 这 里 省 略 了 没有 修改 的 代码 


03 export default class CodePush extends Component { 
04 // 这 里 省 略 了 没有 修改 的 代码 


06 render() ( 

07 return ( 

08 «View style={styles.container}> 

09 «Text style={styles.welcome}> 

10 版 本 号 1.1 

11 </Text> 

12 <Text style={styles.instructions}> 
A3. {this.state.message} 

14 </Text> 

15 </View> 


m 
o 


17 } 
18 } 


9 
20 // 这 里 省 略 了 没有 修改 的 代码 


接着 使 用 CodePush 命 令 行 工具 发 布 该 更 新 : 


code-push release-react CodePush-iOS ios 


此 时 关闭 并 重新 打开 应 用 ， 可 以 看 到 应 用 已 检测 到 更 新 ， 效 果 如 图 12.12 所 示 。 


在 检测 到 更 新 的 同时 ，CodePush SDK 会 自动 下 载 该 更 新 ， 因 此 当 再 次 关闭 并 重新 打开 应 用 时 ， 可 以 看 到 应 上 


Carrier ^ 


1:19 PM 


已 经 更 新 成 功 ， 效 果 如 


图 12.13 所 示 。 


Carrier > 1:16 PM = 


Fo 7k = 11 


WATT J ten 


已 经 是 最 新 版 本 


12.13 ”下载 并 使 用 更 新 


124.5 更改 Android 应 用 


和 iOS 工 程 相同 ，Android 工 程 的 相关 配置 ， 在 使 用 react-native link 命 令 时 也 已 经 配置 好 了 ， 所 以 直接 修改 React Native 相 关 的 逻辑 即 可 ， 修 改 index.androidjs 代 码 如 下 : 


01 import React, (Component) from 'react'; 

02 import (AppRegistry, StyleSheet, Text, View) from 'react-native'; 
03 import codePush from 'react-native-code-push'; 

04 

05 export default class CodePush extends Component { 

06 constructor(props) ( 

07 super (props) ; 

08 this.state = { 

09 message: '' 

10 } 

11 } 

12 

13 componentDidMount() { 

14 codePush.checkForUpdate () .then( (update) => { 
15 if (!update) { 

16 this.setState({message: ' 已 经 是 最 新 版 '}) 7 
17 ) else ( 

18 this.setState({message: ' 有 更 新 '}); 
19 } 

20 D; 

21 } 

22 

23 render() ( 

24 return ( 

25 «View style={styles.container}> 

26 XText style={styles.welcome}> 
27 版 本 号 1.0 

28 «/Text» 

29 «Text style={styles.instructions}> 
30 {this.state.message} 
31 </Text> 

32 </View> 

33 i 

34 } 

35 } 

36 

37 const styles = StyleSheet.create ({ 

38 container: { 

39 flex: 1, 

40 justifyContent: 'center', 

41 alignItems: 'center', 

42 backgroundColor: '#F5FCFF' 

43 ] 


44 welcome: ( 


45 fontSize: 30, 

46 textAlign: 'center', 
47 margin: 10 

48 hy 

49 instructions: { 

50 fontSize: 30, 

51 textAlign: 'center', 
52 color: '#333333', 
53 marginBottom: 5 

54 } 

55 D; 

56 

57 AppRegistry.registerComponent ('CodePush', () => codePush (CodePush) ); 


新 编译 和 运行 应 用 ， 效 果 如 图 12.14 所 示 。 


图 12.14 版 本 1.0 的 Android 应 用 


然后 将 显示 的 系统 版 本 号 升级 为 1.1， 修 改 index.androidjs 代 码 如 下 : 


01 // 这 里 省 略 了 没有 修改 的 代码 


03 export default class CodePush extends Component { 
04 // 这 里 省 略 了 没有 修改 的 代码 


06 render() { 
07 return ( 
08 «View style={styles.container}> 
09 <Text style-(styles.welcome]» 
版 本 号 1.1 
11 </Text> 
12 «Text style={styles.instructions}> 
13 {this.state.message} 
14 </Text> 
15 </View> 


18 } 
20 // 这 里 省 略 了 没有 修改 的 代码 


接着 使 用 CodePush 命 令 行 工具 发 布 该 更 新 : 


code-push release-react CodePush-Android android 


此 时 关闭 并 重新 打开 应 用 ， 可 以 看 到 应 用 已 检测 到 更 新 ， 效 果 如 


12.15 所 示 。 


D 


在 检测 到 更 新 的 同时 ，CodePush SDK 会 自动 下 载 该 更 新 ， 因 此 当 再 次 关闭 并 重新 打开 应 用 时 ， 可 以 看 到 应 用 已 经 更 新 成 功 ， 效 果 如 


12.16 所 示 。 


版 本 号 1.0 
有 更 新 


iig LN 


图 12.16 下载 并 使 用 更 新 


， 基 于 CodePush 的 React Native 应 用 热 更 新 功能 就 完成 了 。 


ibas 关于 CodePush 更 多 功能 的 使 用 和 介绍 ， 读 者 可 以 参考 官方 文档 http://microsoft.github.io/code-push/docs/getting-started.html。 


125 “5 


因此 React 


通过 本 章 的 介绍 ， 想 必 读 者 对 React Native 有 了 一 个 新 的 认识 : 不 仅 开发 效率 高 ， 发 布 效率 也 很 高 。 而 且 从 技术 实现 角度 来 看 ，React Native 应 用 实现 热 更 新 的 成 本 远 低 于 原生 应 
Native 作 为 一 个 新 兴 的 移动 开发 平台 ， 得 到 了 很 多 开发 者 和 项 目 管理 者 的 青睐 。 


至 此 ， 本 书 也 将 告 一 段落 ， 但 是 希望 读者 和 React Native 的 缘分 仍然 能 继续 延续 下 去 。 


附录 A ES6 语 ; 


ES6 指 的 是 ECMAScript6.0， 是 JavaScript 的 最 新 标准 ， 它 在 集成 了 现 有 规范 的 前 提 下 还 引入 了 一 些 实用 的 新 特性 。 
A.1 解构 赋值 


ES6 人 允许 按照 一 定 模式 ， 从 数组 和 对 象 中 提取 值 、 声 明 变 量 并 对 其 进行 赋值 ， 这 种 语法 称 之 为 解构 赋值 。 


Cus: 关于 更 多 解构 赋值 的 详细 介绍 ， 可 以 参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment。 


ES5 规 范 中 导入 组 件 的 代码 片段 如 下 : 


01 var React = require ('react-native'); 
02 var View = React.View; 


使 用 解构 赋值 可 以 让 代码 更 加 优雅 ， 效 果 如 下 : 


01 var (View) = require('react-native'); 


A2 导入 模块 
ES5 规 范 中 导入 模块 使 用 require， 例 如 : 
01 var otherComponent = require('./other component'); 
ES6 语 法 采用 import 来 代替 require。 
01 import otherComponent from './other component'; 
A3 导出 模块 


ES5 规 范 中 导出 模块 使 用 module.exports， 例 如 : 


01 var myComponent = React.createClass ({ 


05 module.exports - MyComponent; 


ES6 语 法 采用 export 来 代替 module.exports。 


01 var myComponent = React.createClass ({ 
03 D; 


05 export default MyComponent; 


A.4 letfüconst 


ES5 规 范 中 声明 变量 使 用 var， 例 如 


01 var a = 1; 


ES6 语 法 采用 let 和 const 来 代替 var， 其 中 let 用 来 声明 变量 ，const 用 来 声明 只 读 常量 。 


01 let a= 1; 

02 a= 2; 

03 const PI = 3.1415; 

04 PI = 3; // TypeError: Assignment to constant variable. 


AS ”函数 简写 
ES5 规 范 中 声明 函数 的 方法 如 下 : 


01 render: function() { 
02 return <Text>Hello React Native!</Text> 
03 } 


ES6 语 法 可 以 使 用 函数 简写 的 声明 方式 。 


01 render() { 
02 return <Text>Hello React Native!</Text> 
03 } 


A.6 箭头 函数 


ES5 规 范 中 为 了 使 函数 的 上 下 文保 持 一 致 ， 通 常 需要 使 用 bind () 函数 。 例 如 回调 函数 : 


01 let callback = function(v) ( 
02 console.log('Hello React Native'); 
03 ).bind(this); 


ES6 语 法 可 以 使 用 箭头 函数 实现 上 下 文 的 自动 绑 定 。 


01 let callback = () => ( 
02 console.log('Hello React Native'); 
3) 


AJ ”字符 串 插值 
ES5 规 范 中 使 用 如 下 代码 拼接 字符 串 : 


01 let s1 
02 let s2 


'React Native'; 
'Hello ' + sl; // s2 = 'Hello React Native' 


ES6 语 法 中 可 以 使 用 字符 串 插值 的 方法 ， 通 过 反 引 号 修饰 字符 串 ， 然 后 就 可 以 使 用 $f 语 法 插入 变量 了 。 


01 let sl 
02 let s2 


"React Native'; 
"Hello ${sl}'; // s2 = 'Hello React Native' 


A.8 Promise 异 步 


Promise 是 异步 编程 的 一 种 解决 方案 ， 比 传统 的 解决 方案 (回调 函数 和 事件 ) 更 合理 、 更 强大 。ES6 将 其 写 进 了 语言 标准 ,统一 了 用 法 ， 原 生 提供 了 Promise 对 象 。 


在 使 用 Promise 之 前 ， 异 步 操作 的 代码 看 起 来 是 这 样 的 : 


01 try ( 

02 this.doAsyncOperation (params, this.onSuccessCallback, this.onError 
Callback); 

03 ) catch (e) ( 

05 } 

07 onSuccessCallback(params) ( 

09] 

11 onErrorCallback (params) { 


13] 


tnRERESIERBMFRUSS, MARAR "AEF" , BüCallback Hell (http://callbackhell.com/) 的 问题 。 


ES6 语 法 中 可 以 使 用 Promise 来 解决 异步 代码 的 问题 : 


01 this.doAsyncOperation (params) .then ( (params) => { 
02 .. 
03 }).catch((e) => { 


05 }) 


Las: 关于 更 多 ES6 语 法 的 介绍 ， 读 者 可 以 参考 ES6 官 方 文档 (htp://ES6-features.org/) 或 开源 教程 《ECMAScript6 入 门 》 (http://ES6.ruanyifeng.com/). o 


